<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/form-elements.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=input.html>← 4.10.5 The input element</a> — <a href=index.html>Table of Contents</a> — <a href=form-control-infrastructure.html>4.10.18 Form control infrastructure →</a></nav><ol class=toc><li><ol><li><ol><li><a href=form-elements.html#the-button-element><span class=secno>4.10.6</span> The <code>button</code> element</a><li><a href=form-elements.html#the-select-element><span class=secno>4.10.7</span> The <code>select</code> element</a><li><a href=form-elements.html#the-datalist-element><span class=secno>4.10.8</span> The <code>datalist</code> element</a><li><a href=form-elements.html#the-optgroup-element><span class=secno>4.10.9</span> The <code>optgroup</code> element</a><li><a href=form-elements.html#the-option-element><span class=secno>4.10.10</span> The <code>option</code> element</a><li><a href=form-elements.html#the-textarea-element><span class=secno>4.10.11</span> The <code>textarea</code> element</a><li><a href=form-elements.html#the-output-element><span class=secno>4.10.12</span> The <code>output</code> element</a><li><a href=form-elements.html#the-progress-element><span class=secno>4.10.13</span> The <code>progress</code> element</a><li><a href=form-elements.html#the-meter-element><span class=secno>4.10.14</span> The <code>meter</code> element</a><li><a href=form-elements.html#the-fieldset-element><span class=secno>4.10.15</span> The <code>fieldset</code> element</a><li><a href=form-elements.html#the-legend-element><span class=secno>4.10.16</span> The <code>legend</code> element</a><li><a href=form-elements.html#the-selectedcontent-element><span class=secno>4.10.17</span> The <code>selectedcontent</code> element</a></ol></ol></ol><h4 id=the-button-element><span class=secno>4.10.6</span> The <dfn data-dfn-type=element><code>button</code></dfn> element<a href=#the-button-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button title="The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.">Element/button</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>15+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>14+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-button-element:concept-element-categories>Categories</a>:<dd><a id=the-button-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-button-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-button-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a href=forms.html#category-listed id=the-button-element:category-listed>Listed</a>, <a href=forms.html#category-label id=the-button-element:category-label>labelable</a>, <a href=forms.html#category-submit id=the-button-element:category-submit>submittable</a>, and <a href=forms.html#category-autocapitalize id=the-button-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-button-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-button-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-button-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-button-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dd>As the first child of a <code id=the-button-element:the-select-element><a href=#the-select-element>select</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-button-element:concept-element-content-model>Content model</a>:<dd><a id=the-button-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>, but there must be no <a id=the-button-element:interactive-content-2-2 href=dom.html#interactive-content-2>interactive content</a>
   descendant and no descendant with the <code id=the-button-element:attr-tabindex><a href=interaction.html#attr-tabindex>tabindex</a></code> attribute
   specified. If the element is the first child of a <code id=the-button-element:the-select-element-2><a href=#the-select-element>select</a></code> element, then it may also
   have zero or one descendant <code id=the-button-element:the-selectedcontent-element><a href=#the-selectedcontent-element>selectedcontent</a></code> element.<dt><a href=dom.html#concept-element-tag-omission id=the-button-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-button-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-button-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-button-element:attr-button-command><a href=#attr-button-command>command</a></code> —  Indicates to the targeted element which action to take.
     <dd><code id=the-button-element:attr-button-commandfor><a href=#attr-button-commandfor>commandfor</a></code> —  Targets another element to be invoked.
     <dd><code id=the-button-element:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-button-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-button-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-button-element:attr-fs-formaction><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code> —  <a id=the-button-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> to use for <a id=the-button-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-button-element:attr-fs-formenctype><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code> —  <span>Entry list</span> encoding type to use for <a id=the-button-element:form-submission-2-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-button-element:attr-fs-formmethod><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code> —  Variant to use for <a id=the-button-element:form-submission-2-3 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-button-element:attr-fs-formnovalidate><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code> —  Bypass form control validation for <a id=the-button-element:form-submission-2-4 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-button-element:attr-fs-formtarget><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> —  <a id=the-button-element:navigable href=document-sequences.html#navigable>Navigable</a> for <a id=the-button-element:form-submission-2-5 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-button-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> —  Name of the element to use for <a id=the-button-element:form-submission-2-6 href=form-control-infrastructure.html#form-submission-2>form submission</a> and in the <code id=the-button-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API 
     <dd><code id=the-button-element:attr-popovertarget><a href=popover.html#attr-popovertarget>popovertarget</a></code> —  Targets a popover element to toggle, show, or hide
     <dd><code id=the-button-element:attr-popovertargetaction><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code> —  Indicates whether a targeted popover element is to be toggled, shown, or hidden
     <dd><code id=the-button-element:attr-button-type><a href=#attr-button-type>type</a></code> —  Type of button
     <dd><code id=the-button-element:attr-button-value><a href=#attr-button-value>value</a></code> —  Value to be used for <a id=the-button-element:form-submission-2-7 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-button-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-button>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-button>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-button-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLButtonElement</code>.</dl>

  <p>The <code id=the-button-element:the-button-element><a href=#the-button-element>button</a></code> element <a id=the-button-element:represents href=dom.html#represents>represents</a> a button labeled by its contents.</p>

  <p>The element is a <a href=forms.html#concept-button id=the-button-element:concept-button>button</a>.</p>

  <p>The <dfn data-dfn-for=button id=attr-button-type data-dfn-type=element-attr><code>type</code></dfn> attribute
  controls the behavior of the button when it is activated. It is an <a id=the-button-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated
  attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th> Keyword
     <th> State
     <th> Brief description
   <tbody><tr><td><dfn data-dfn-for=button/type id=attr-button-type-submit data-dfn-type=attr-value><code>submit</code></dfn>
     <td><dfn id=attr-button-type-submit-state>Submit Button</dfn>
     <td>Submits the form.
    <tr><td><dfn data-dfn-for=button/type id=attr-button-type-reset data-dfn-type=attr-value><code>reset</code></dfn>
     <td><dfn id=attr-button-type-reset-state>Reset Button</dfn>
     <td>Resets the form.
    <tr><td><dfn data-dfn-for=button/type id=attr-button-type-button data-dfn-type=attr-value><code>button</code></dfn>
     <td><dfn id=attr-button-type-button-state>Button</dfn>
     <td>Does nothing.
  </table>

  <p>The attribute's <i id=the-button-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-button-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <dfn id=attr-button-type-auto-state>Auto</dfn> state.</p>

  <p>A <code id=the-button-element:the-button-element-2><a href=#the-button-element>button</a></code> element is said to be a <a href=forms.html#concept-submit-button id=the-button-element:concept-submit-button>submit button</a> if any of the following are true:</p>

  <ul><li><p>the <code id=the-button-element:attr-button-type-2><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-auto-state id=the-button-element:attr-button-type-auto-state>Auto</a> state, both the <code id=the-button-element:attr-button-command-2><a href=#attr-button-command>command</a></code> and <code id=the-button-element:attr-button-commandfor-2><a href=#attr-button-commandfor>commandfor</a></code> content attributes are not present, and the
   <a id=the-button-element:parent href=https://dom.spec.whatwg.org/#concept-tree-parent data-x-internal=parent>parent</a> node is not a <code id=the-button-element:the-select-element-3><a href=#the-select-element>select</a></code> element;
   or<li><p>the <code id=the-button-element:attr-button-type-3><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-submit-state id=the-button-element:attr-button-type-submit-state>Submit Button</a> state.</ul>

  <p><strong>Constraint validation</strong>: If the element is not a <a href=forms.html#concept-submit-button id=the-button-element:concept-submit-button-2>submit button</a>, the element is <span>barred from constraint
  validation</span>.</p>

  <p>If specified, the <dfn data-dfn-for=button id=attr-button-commandfor data-dfn-type=element-attr><code>commandfor</code></dfn> attribute value must be the <a href=https://dom.spec.whatwg.org/#concept-id id=the-button-element:concept-id data-x-internal=concept-id>ID</a> of an element in the same <a id=the-button-element:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> as the <a href=forms.html#concept-button id=the-button-element:concept-button-2>button</a> with the <code id=the-button-element:attr-button-commandfor-3><a href=#attr-button-commandfor>commandfor</a></code> attribute.</p>

  <p>The <dfn data-dfn-for=button id=attr-button-command data-dfn-type=element-attr><code>command</code></dfn>
  attribute is an <a id=the-button-element:enumerated-attribute-2 href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-toggle-popover data-dfn-type=attr-value><code>toggle-popover</code></dfn>
     <td><dfn id=attr-button-command-toggle-popover-state>Toggle Popover</dfn>
     <td>Shows or hides the targeted <code id=the-button-element:attr-popover><a href=popover.html#attr-popover>popover</a></code> element.
    <tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-show-popover data-dfn-type=attr-value><code>show-popover</code></dfn>
     <td><dfn id=attr-button-command-show-popover-state>Show Popover</dfn>
     <td>Shows the targeted <code id=the-button-element:attr-popover-2><a href=popover.html#attr-popover>popover</a></code> element.
    <tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-hide-popover data-dfn-type=attr-value><code>hide-popover</code></dfn>
     <td><dfn id=attr-button-command-hide-popover-state>Hide Popover</dfn>
     <td>Hides the targeted <code id=the-button-element:attr-popover-3><a href=popover.html#attr-popover>popover</a></code> element.
    <tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-close data-dfn-type=attr-value><code>close</code></dfn>
     <td><dfn id=attr-button-command-close-state>Close</dfn>
     <td>Closes the targeted <code id=the-button-element:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element.
    <tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-request-close data-dfn-type=attr-value><code>request-close</code></dfn>
     <td><dfn id=attr-button-command-request-close-state>Request Close</dfn>
     <td>Requests to close the targeted <code id=the-button-element:the-dialog-element-2><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element.
    <tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-show-modal data-dfn-type=attr-value><code>show-modal</code></dfn>
     <td><dfn id=attr-button-command-show-modal-state>Show Modal</dfn>
     <td>Opens the targeted <code id=the-button-element:the-dialog-element-3><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element as modal.
    <tr><td>A <a href=#attr-button-command-custom id=the-button-element:attr-button-command-custom>custom command keyword</a>
     <td><dfn id=attr-button-command-custom-state>Custom</dfn>
     <td>Only dispatches the <code id=the-button-element:event-command><a href=indices.html#event-command>command</a></code> event on the targeted
     element.
  </table>

  <p>The attribute's <i id=the-button-element:missing-value-default-2><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-button-element:invalid-value-default-2><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <dfn id=attr-button-command-unknown-state>Unknown</dfn> state.</p>

  <p>A <dfn id=attr-button-command-custom>custom command keyword</dfn> is a string that
  <a id=the-button-element:starts-with href=https://infra.spec.whatwg.org/#string-starts-with data-x-internal=starts-with>starts with</a> "<code>--</code>".</p>

  <p>If a <code id=the-button-element:the-button-element-3><a href=#the-button-element>button</a></code> element is the first <a href=https://dom.spec.whatwg.org/#concept-tree-child id=the-button-element:concept-tree-child data-x-internal=concept-tree-child>child</a>
  which is an <a id=the-button-element:element href=https://dom.spec.whatwg.org/#interface-element data-x-internal=element>element</a> of a <code id=the-button-element:the-select-element-4><a href=#the-select-element>select</a></code> element, then it is
  <a id=the-button-element:inert href=interaction.html#inert>inert</a>.</p>

  

  <p>The <code id=the-button-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-button-element:the-button-element-4><a href=#the-button-element>button</a></code> element with its <a id=the-button-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>. The <code id=the-button-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name. The <code id=the-button-element:attr-fe-disabled-2><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> attribute is used to make the control non-interactive and
  to prevent its value from being submitted. The <code id=the-button-element:attr-fs-formaction-2><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
  <code id=the-button-element:attr-fs-formenctype-2><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>, <code id=the-button-element:attr-fs-formmethod-2><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>, <code id=the-button-element:attr-fs-formnovalidate-2><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id=the-button-element:attr-fs-formtarget-2><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> attributes are <a id=the-button-element:attributes-for-form-submission href=form-control-infrastructure.html#attributes-for-form-submission>attributes for form
  submission</a>.</p>

  <p class=note>The <code id=the-button-element:attr-fs-formnovalidate-3><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code> attribute can be
  used to make submit buttons that do not trigger the constraint validation.</p>

  <p>The <code id=the-button-element:attr-fs-formaction-3><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>, <code id=the-button-element:attr-fs-formenctype-3><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>, <code id=the-button-element:attr-fs-formmethod-3><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>, <code id=the-button-element:attr-fs-formnovalidate-4><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id=the-button-element:attr-fs-formtarget-3><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> must not be specified if the element is not
  a <a href=forms.html#concept-submit-button id=the-button-element:concept-submit-button-3>submit button</a>.</p>

  <p>The <dfn data-dfn-for=HTMLButtonElement id=dom-button-command data-dfn-type=attribute><code>command</code></dfn> getter steps are:</p>

  <ol><li><p>Let <var>command</var> be <a id=the-button-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=the-button-element:attr-button-command-3><a href=#attr-button-command>command</a></code> attribute.<li><p>If <var>command</var> is in the <a href=#attr-button-command-custom-state id=the-button-element:attr-button-command-custom-state>Custom</a> state, then return <var>command</var>'s
   value.<li><p>If <var>command</var> is in the <a href=#attr-button-command-unknown-state id=the-button-element:attr-button-command-unknown-state>Unknown</a> state, then return the empty
   string.<li><p>Return the keyword corresponding to the value of <var>command</var>.</ol>

  <p>The <dfn data-dfn-for=button id=attr-button-value data-dfn-type=element-attr><code>value</code></dfn>
  attribute gives the element's value for the purposes of form submission. The element's <a href=form-control-infrastructure.html#concept-fe-value id=the-button-element:concept-fe-value>value</a> is the value of the element's <code id=the-button-element:attr-button-value-2><a href=#attr-button-value>value</a></code> attribute, if there is one; otherwise the empty string.
  The element's <a href=form-control-infrastructure.html#concept-fe-optional-value id=the-button-element:concept-fe-optional-value>optional value</a> is the value of the
  element's <code id=the-button-element:attr-button-value-3><a href=#attr-button-value>value</a></code> attribute, if there is one; otherwise
  null.</p>

  <p class=note>A button (and its value) is only included in the form submission if the button
  itself was used to initiate the form submission.</p>

  <hr>

  

  <div class=example>

   <p>The following button is labeled "Show hint" and pops up a dialog box when activated:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c->
        <c- e>onclick</c-><c- o>=</c-><c- s>&quot;alert(&apos;This 15-20 minute piece was composed by George Gershwin.&apos;)&quot;</c-><c- p>&gt;</c->
 Show hint
<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>
   <p>The following shows how <a href=forms.html#concept-button id=the-button-element:concept-button-3>buttons</a> can use <code id=the-button-element:attr-button-commandfor-4><a href=#attr-button-commandfor>commandfor</a></code> to show and hide an element with
   the <code id=the-button-element:attr-popover-4><a href=popover.html#attr-popover>popover</a></code> attribute when activated:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c->
        <c- e>commandfor</c-><c- o>=</c-><c- s>&quot;the-popover&quot;</c->
        <c- e>command</c-><c- o>=</c-><c- s>&quot;show-popover&quot;</c-><c- p>&gt;</c->
 Show menu
<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>popover</c->
     <c- e>id</c-><c- o>=</c-><c- s>&quot;the-popover&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>button</c-> <c- e>commandfor</c-><c- o>=</c-><c- s>&quot;the-popover&quot;</c->
         <c- e>command</c-><c- o>=</c-><c- s>&quot;hide-popover&quot;</c-><c- p>&gt;</c->
  Hide menu
 <c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
    </code></pre>
  </div>

  <div class=example>
   <p>The following shows how buttons can use <code id=the-button-element:attr-button-commandfor-5><a href=#attr-button-commandfor>commandfor</a></code> with a <a href=#attr-button-command-custom id=the-button-element:attr-button-command-custom-2>custom command keyword</a> on an element, demonstrating
   how one could use custom commands for unspecified behavior:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c->
        <c- e>commandfor</c-><c- o>=</c-><c- s>&quot;the-image&quot;</c->
        <c- e>command</c-><c- o>=</c-><c- s>&quot;--rotate-landscape&quot;</c-><c- p>&gt;</c->
 Rotate Left
<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c->
        <c- e>commandfor</c-><c- o>=</c-><c- s>&quot;the-image&quot;</c->
        <c- e>command</c-><c- o>=</c-><c- s>&quot;--rotate-portrait&quot;</c-><c- p>&gt;</c->
 Rotate Right
<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>img</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;the-image&quot;</c->
     <c- e>src</c-><c- o>=</c-><c- s>&quot;photo.jpg&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>const</c-> image <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- u>&quot;the-image&quot;</c-><c- p>);</c->
  image<c- p>.</c->addEventListener<c- p>(</c-><c- u>&quot;command&quot;</c-><c- p>,</c-> <c- p>(</c->event<c- p>)</c-> <c- p>=&gt;</c-> <c- p>{</c->
   <c- k>if</c-> <c- p>(</c-> event<c- p>.</c->command <c- o>==</c-> <c- u>&quot;--rotate-landscape&quot;</c-> <c- p>)</c-> <c- p>{</c->
    event<c- p>.</c->target<c- p>.</c->style<c- p>.</c->rotate <c- o>=</c-> <c- u>&quot;-90deg&quot;</c->
   <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c-> event<c- p>.</c->command <c- o>==</c-> <c- u>&quot;--rotate-portrait&quot;</c-> <c- p>)</c-> <c- p>{</c->
    event<c- p>.</c->target<c- p>.</c->style<c- p>.</c->rotate <c- o>=</c-> <c- u>&quot;0deg&quot;</c->
   <c- p>}</c->
  <c- p>});</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
    </code></pre>
  </div>

  <h4 id=the-select-element><span class=secno>4.10.7</span> The <dfn data-dfn-type=element><code>select</code></dfn> element<a href=#the-select-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select title="The <select> HTML element represents a control that provides a menu of options.">Element/select</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>2+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-select-element:concept-element-categories>Categories</a>:<dd><a id=the-select-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-select-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-select-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a href=forms.html#category-listed id=the-select-element:category-listed>Listed</a>, <a href=forms.html#category-label id=the-select-element:category-label>labelable</a>, <a href=forms.html#category-submit id=the-select-element:category-submit>submittable</a>, <a href=forms.html#category-reset id=the-select-element:category-reset>resettable</a>, and <a href=forms.html#category-autocapitalize id=the-select-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-select-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-select-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-select-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-select-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-select-element:concept-element-content-model>Content model</a>:<dd>Zero or one <code id=the-select-element:the-button-element><a href=#the-button-element>button</a></code> elements if the <code id=the-select-element:the-select-element><a href=#the-select-element>select</a></code> is a <span>drop-down
   box</span>, followed by zero or more <a id=the-select-element:select-element-inner-content-elements-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content
   elements</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-select-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-select-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-select-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-select-element:attr-fe-autocomplete><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> —  Hint for form autofill feature
     <dd><code id=the-select-element:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-select-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-select-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-select-element:attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> —  Whether to allow multiple values
     <dd><code id=the-select-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> —  Name of the element to use for <a id=the-select-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a> and in the <code id=the-select-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API 
     <dd><code id=the-select-element:attr-select-required><a href=#attr-select-required>required</a></code> —  Whether the control is required for <a id=the-select-element:form-submission-2-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-select-element:attr-select-size><a href=#attr-select-size>size</a></code> —  Size of the control
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-select-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd>If the element has a <code id=the-select-element:attr-select-multiple-2><a href=#attr-select-multiple>multiple</a></code> attribute or a <code id=the-select-element:attr-select-size-2><a href=#attr-select-size>size</a></code> attribute with a value > 1: <a href=https://w3c.github.io/html-aria/#el-select-multiple-or-size-greater-1>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-select-listbox>for implementers</a>.<dd>Otherwise: <a href=https://w3c.github.io/html-aria/#el-select>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-select-combobox>for implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-select-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLSelectElement</code>.</dl>
  

  <p>The <code id=the-select-element:the-select-element-2><a href=#the-select-element>select</a></code> element represents a control for selecting amongst a set of
  options.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple title="The Boolean multiple attribute, if set, means the form control accepts one or more values. Valid for the email and file input types and the <select>, the manner by which the user opts for multiple values depends on the form control.">Attributes/multiple</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=select id=attr-select-multiple data-dfn-type=element-attr><code>multiple</code></dfn>
  attribute is a <a id=the-select-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. If the attribute is present, then the
  <code id=the-select-element:the-select-element-3><a href=#the-select-element>select</a></code> element <a id=the-select-element:represents href=dom.html#represents>represents</a> a control for selecting zero or more options
  from the <span>list of options</span>. If the attribute is
  absent, then the <code id=the-select-element:the-select-element-4><a href=#the-select-element>select</a></code> element <a id=the-select-element:represents-2 href=dom.html#represents>represents</a> a control for selecting a
  single option from the <span>list of options</span>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size title="The size attribute defines the width of the <input> and the height of the <select> element. For the input, if the type attribute is text or password then it's the number of characters. This must be an integer value of 0 or higher. If no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. If CSS targets the element with properties impacting the width, CSS takes precedence.">Attributes/size</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=select id=attr-select-size data-dfn-type=element-attr><code>size</code></dfn> attribute
  gives the number of options to show to the user. The <code id=the-select-element:attr-select-size-3><a href=#attr-select-size>size</a></code>
  attribute, if specified, must have a value that is a <a id=the-select-element:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a>
  greater than zero.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required title="The Boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.">Attributes/required</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=select id=attr-select-required data-dfn-type=element-attr><code>required</code></dfn>
  attribute is a <a id=the-select-element:boolean-attribute-2 href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. When specified, the user will be required to select
  a value before submitting the form.</p>

  <p>The <code id=the-select-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-select-element:the-select-element-5><a href=#the-select-element>select</a></code> element with its <a id=the-select-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>. The <code id=the-select-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name. The <code id=the-select-element:attr-fe-disabled-2><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> attribute is used to make the control non-interactive
  and to prevent its value from being submitted. The <code id=the-select-element:attr-fe-autocomplete-2><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> attribute controls how the user agent provides
  autofill behavior.</p>

  <p>If a <code id=the-select-element:the-select-element-6><a href=#the-select-element>select</a></code> element has a <code id=the-select-element:attr-select-required-2><a href=#attr-select-required>required</a></code>
  attribute specified, does not have a <code id=the-select-element:attr-select-multiple-3><a href=#attr-select-multiple>multiple</a></code> attribute
  specified, and has a <span>display size</span> of 1; and if the <a href=#concept-option-value id=the-select-element:concept-option-value>value</a> of the first <code id=the-select-element:the-option-element><a href=#the-option-element>option</a></code> element in the
  <code id=the-select-element:the-select-element-7><a href=#the-select-element>select</a></code> element's <span>list of options</span> (if
  any) is the empty string, and that <code id=the-select-element:the-option-element-2><a href=#the-option-element>option</a></code> element's parent node is the
  <code id=the-select-element:the-select-element-8><a href=#the-select-element>select</a></code> element (and not an <code id=the-select-element:the-optgroup-element><a href=#the-optgroup-element>optgroup</a></code> element), then that
  <code id=the-select-element:the-option-element-3><a href=#the-option-element>option</a></code> is the <code id=the-select-element:the-select-element-9><a href=#the-select-element>select</a></code> element's <dfn id=placeholder-label-option>placeholder label option</dfn>.</p>

  <p>If a <code id=the-select-element:the-select-element-10><a href=#the-select-element>select</a></code> element has a <code id=the-select-element:attr-select-required-3><a href=#attr-select-required>required</a></code>
  attribute specified, does not have a <code id=the-select-element:attr-select-multiple-4><a href=#attr-select-multiple>multiple</a></code> attribute
  specified, and has a <span>display size</span> of 1, then the
  <code id=the-select-element:the-select-element-11><a href=#the-select-element>select</a></code> element must have a <a href=#placeholder-label-option id=the-select-element:placeholder-label-option>placeholder label option</a>.</p>

  <p class=note>In practice, the requirement stated in the paragraph above can only apply when a
  <code id=the-select-element:the-select-element-12><a href=#the-select-element>select</a></code> element does not have a <code id=the-select-element:attr-select-size-4><a href=#attr-select-size>size</a></code> attribute
  with a value greater than 1.</p>

  

  <hr>

  <dl class=domintro><dt><code><var>select</var>.<span id=dom-select-type>type</span></code><dd>
    <p>Returns "<code>select-multiple</code>" if the element has a <code id=the-select-element:attr-select-multiple-5><a href=#attr-select-multiple>multiple</a></code> attribute, and "<code>select-one</code>"
    otherwise.</p>
   <dt><code><var>select</var>.<span id=dom-select-options>options</span></code><dd><p>Returns an <code>HTMLOptionsCollection</code> of the <span>list of options</span>.<dt><code><var>select</var>.<span id=dom-select-length>length</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the number of elements in the <span>list of
    options</span>.</p>

    <p>When set to a smaller number, truncates the number of <code id=the-select-element:the-option-element-4><a href=#the-option-element>option</a></code> elements in the
    <code id=the-select-element:the-select-element-13><a href=#the-select-element>select</a></code>.</p>

    <p>When set to a greater number, adds new blank <code id=the-select-element:the-option-element-5><a href=#the-option-element>option</a></code> elements to the
    <code id=the-select-element:the-select-element-14><a href=#the-select-element>select</a></code>.</p>
   <dt><code><var>element</var> = <var>select</var>.<span id=dom-select-item>item</span>(<var>index</var>)</code><dt><code><var>select</var>[<var>index</var>]</code><dd>
    <p>Returns the item with index <var>index</var> from the <span>list of options</span>. The items are sorted in <a id=the-select-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree
    order</a>.</p>
   <dt><code><var>element</var> = <var>select</var>.<span id=dom-select-nameditem>namedItem</span>(<var>name</var>)</code><dd>
    <p>Returns the first item with <a href=https://dom.spec.whatwg.org/#concept-id id=the-select-element:concept-id data-x-internal=concept-id>ID</a> or <code id=the-select-element:attr-option-name><a href=obsolete.html#attr-option-name>name</a></code> <var>name</var> from the <span>list of options</span>.</p>

    <p>Returns null if no element with that <a href=https://dom.spec.whatwg.org/#concept-id id=the-select-element:concept-id-2 data-x-internal=concept-id>ID</a> could be found.</p>
   <dt><code><var>select</var>.<span id=dom-select-add>add</span>(<var>element</var> [, <var>before</var> ])</code><dd>
    <p>Inserts <var>element</var> before the node given by <var>before</var>.</p>

    <p>The <var>before</var> argument can be a number, in which case <var>element</var> is inserted
    before the item with that number, or an element from the <span>list of options</span>, in which case <var>element</var> is
    inserted before that element.</p>

    <p>If <var>before</var> is omitted, null, or a number out of range, then <var>element</var> will
    be added at the end of the list.</p>

    <p>This method will throw a <a id=the-select-element:hierarchyrequesterror href=https://webidl.spec.whatwg.org/#hierarchyrequesterror data-x-internal=hierarchyrequesterror>"<code>HierarchyRequestError</code>"</a>
    <code id=the-select-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if <var>element</var> is an ancestor of the element into which it is
    to be inserted.</p>
   <dt><code><var>select</var>.<span id=dom-select-selectedoptions>selectedOptions</span></code><dd>
    <p>Returns an <code id=the-select-element:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <span>list
    of options</span> that are selected.</p>
   <dt><code><var>select</var>.<span id=dom-select-selectedindex>selectedIndex</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the index of the first selected item, if any, or −1 if there is no selected
    item.</p>

    <p>Can be set, to change the selection.</p>
   <dt><code><var>select</var>.<span id=dom-select-value>value</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the <a href=#concept-option-value id=the-select-element:concept-option-value-2>value</a> of the first selected item, if
    any, or the empty string if there is no selected item.</p>

    <p>Can be set, to change the selection.</p>
   <dt><code><var>select</var>.<span id=dom-select-showpicker>showPicker</span>()</code><dd>
    <p>Shows any applicable picker UI for <var>select</var>, so that the user can select a value.

    <p>Throws an <a id=the-select-element:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-select-element:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>select</var> is not <a href=form-control-infrastructure.html#concept-fe-mutable id=the-select-element:concept-fe-mutable>mutable</a>.</p>

    <p>Throws a <a id=the-select-element:notallowederror href=https://webidl.spec.whatwg.org/#notallowederror data-x-internal=notallowederror>"<code>NotAllowedError</code>"</a> <code id=the-select-element:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if called
    without <span>transient user activation</span>.</p>

    <p>Throws a <a id=the-select-element:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=the-select-element:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>select</var> is inside a cross-origin <code id=the-select-element:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>.</p>

    <p>Throws a <a id=the-select-element:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-select-element:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>select</var> is not <span>being rendered</span>.</p>
   </dl>

  

  <hr>

  <div class=example>

   <p>The following example shows how a <code id=the-select-element:the-select-element-15><a href=#the-select-element>select</a></code> element can be used to offer the user
   with a set of options from which the user can select a single option. The default option is
   preselected.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;unittype&quot;</c-><c- p>&gt;</c->Select unit type:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>select</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;unittype&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;unittype&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1&quot;</c-><c- p>&gt;</c-> Miner <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;2&quot;</c-><c- p>&gt;</c-> Puffer <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;3&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Snipey <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;4&quot;</c-><c- p>&gt;</c-> Max <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;5&quot;</c-><c- p>&gt;</c-> Firebot <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>When there is no default option, a placeholder can be used instead:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;unittype&quot;</c-> <strong><c- e>required</c-></strong><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-> Select unit type <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1&quot;</c-><c- p>&gt;</c-> Miner <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;2&quot;</c-><c- p>&gt;</c-> Puffer <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;3&quot;</c-><c- p>&gt;</c-> Snipey <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;4&quot;</c-><c- p>&gt;</c-> Max <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;5&quot;</c-><c- p>&gt;</c-> Firebot <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Here, the user is offered a set of options from which they can select any number. By default,
   all five options are selected.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;allowedunits&quot;</c-><c- p>&gt;</c->Select unit types to enable on this map:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>select</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;allowedunits&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;allowedunits&quot;</c-> <c- e>multiple</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Miner <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;2&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Puffer <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;3&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Snipey <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;4&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Max <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;5&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Firebot <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Sometimes, a user has to select one or more items. This example shows such an interface.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 Select the songs from that you would like on your Act II Mix Tape:
 <c- p>&lt;</c-><c- f>select</c-> <c- e>multiple</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;act2&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s1&quot;</c-><c- p>&gt;</c->It Sucks to Be Me (Reprise)
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s2&quot;</c-><c- p>&gt;</c->There is Life Outside Your Apartment
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s3&quot;</c-><c- p>&gt;</c->The More You Ruv Someone
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s4&quot;</c-><c- p>&gt;</c->Schadenfreude
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s5&quot;</c-><c- p>&gt;</c->I Wish I Could Go Back to College
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s6&quot;</c-><c- p>&gt;</c->The Money Song
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s7&quot;</c-><c- p>&gt;</c->School for Monsters
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s8&quot;</c-><c- p>&gt;</c->The Money Song (Reprise)
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s9&quot;</c-><c- p>&gt;</c->There&apos;s a Fine, Fine Line (Reprise)
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s10&quot;</c-><c- p>&gt;</c->What Do You Do With a B.A. in English? (Reprise)
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s11&quot;</c-><c- p>&gt;</c->For Now
 <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>
   <p>Occasionally it can be useful to have a separator:

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 Select the song to play next:
 <c- p>&lt;</c-><c- f>select</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;next&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;sr&quot;</c-><c- p>&gt;</c->Random
  <c- p>&lt;</c-><c- f>hr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s1&quot;</c-><c- p>&gt;</c->It Sucks to Be Me (Reprise)
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s2&quot;</c-><c- p>&gt;</c->There is Life Outside Your Apartment
  …</code></pre>
  </div>

  <div id=example-customizable-select class=example><a href=#example-customizable-select class=self-link></a>
   <p>Here is an example which uses <code id=the-select-element:the-div-element><a href=grouping-content.html#the-div-element>div</a></code>, <code id=the-select-element:the-legend-element><a href=#the-legend-element>legend</a></code>,
   <code id=the-select-element:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>, <code id=the-select-element:the-button-element-2><a href=#the-button-element>button</a></code>, and <code id=the-select-element:the-selectedcontent-element><a href=#the-selectedcontent-element>selectedcontent</a></code> elements:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>select</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>button</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>selectedcontent</c-><c- p>&gt;&lt;/</c-><c- f>selectedcontent</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;border&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>optgroup</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->WHATWG Specifications<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;html.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
        HTML
      <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;dom.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
        DOM
      <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>optgroup</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;border&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>optgroup</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->W3C Specifications<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;forms.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
        CSS Form Control Styling
      <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;pseudo.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
        CSS Pseudo-Elements
      <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>optgroup</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p id=note-first-button-in-select-not-submit class=note><a href=#note-first-button-in-select-not-submit class=self-link></a>The first child <code id=the-select-element:the-button-element-3><a href=#the-button-element>button</a></code>
  element as allowed by the content model of <code id=the-select-element:the-select-element-16><a href=#the-select-element>select</a></code> is not a submit button. It is used
  to replace the in-page rendering of the <code id=the-select-element:the-select-element-17><a href=#the-select-element>select</a></code> element. Its form submission behavior
  is prevented because it is <a id=the-select-element:inert href=interaction.html#inert>inert</a>.</p>



  <h4 id=the-datalist-element><span class=secno>4.10.8</span> The <dfn data-dfn-type=element><code>datalist</code></dfn> element<a href=#the-datalist-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist title="The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.">Element/datalist</a><div class=support><span class="firefox yes"><span>Firefox</span><span title="Partial implementation.">🔰 4+</span></span><span class="safari yes"><span>Safari</span><span>12.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>9.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span title="Partial implementation.">🔰 79+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>33+</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-datalist-element:concept-element-categories>Categories</a>:<dd><a id=the-datalist-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-datalist-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-datalist-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-datalist-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-datalist-element:concept-element-content-model>Content model</a>:<dd>Either: <a id=the-datalist-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>phrasing content</a>.<dd>Or: Zero or more <code id=the-datalist-element:the-option-element><a href=#the-option-element>option</a></code> and <a href=dom.html#script-supporting-elements-2 id=the-datalist-element:script-supporting-elements-2>script-supporting</a> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-datalist-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-datalist-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-datalist-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-datalist-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-datalist>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-datalist>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-datalist-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLDataListElement</code>.</dl>

  <p>The <code id=the-datalist-element:the-datalist-element><a href=#the-datalist-element>datalist</a></code> element represents a set of <code id=the-datalist-element:the-option-element-2><a href=#the-option-element>option</a></code> elements that
  represent predefined options for other controls. In the rendering, the <code id=the-datalist-element:the-datalist-element-2><a href=#the-datalist-element>datalist</a></code>
  element <a id=the-datalist-element:represents href=dom.html#represents>represents</a> nothing.</p>

  <p>The <code id=the-datalist-element:the-datalist-element-3><a href=#the-datalist-element>datalist</a></code> element can be used in two ways. In the simplest case, the
  <code id=the-datalist-element:the-datalist-element-4><a href=#the-datalist-element>datalist</a></code> element has just <code id=the-datalist-element:the-option-element-3><a href=#the-option-element>option</a></code> element children.</p>

  <div class=example>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 Animal:
 <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>animal</c-> <c- e>list</c-><c- o>=</c-><c- s>animals</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>animals</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Cat&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Dog&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>In the more elaborate case, the <code id=the-datalist-element:the-datalist-element-5><a href=#the-datalist-element>datalist</a></code> element can be given contents that are to
  be displayed for down-level clients that don't support <code id=the-datalist-element:the-datalist-element-6><a href=#the-datalist-element>datalist</a></code>. In this case, the
  <code id=the-datalist-element:the-option-element-4><a href=#the-option-element>option</a></code> elements are provided inside a <code id=the-datalist-element:the-select-element><a href=#the-select-element>select</a></code> element inside the
  <code id=the-datalist-element:the-datalist-element-7><a href=#the-datalist-element>datalist</a></code> element.</p>

  <div class=example>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 Animal:
 <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>animal</c-> <c- e>list</c-><c- o>=</c-><c- s>animals</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>animals</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  or select from the list:
  <c- p>&lt;</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>animal</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Cat
   <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Dog
  <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>The <code id=the-datalist-element:the-datalist-element-8><a href=#the-datalist-element>datalist</a></code> element is hooked up to an <code id=the-datalist-element:the-input-element><a href=input.html#the-input-element>input</a></code> element using the <code id=the-datalist-element:attr-input-list><a href=input.html#attr-input-list>list</a></code> attribute on the <code id=the-datalist-element:the-input-element-2><a href=input.html#the-input-element>input</a></code> element.</p>

  <p>Each <code id=the-datalist-element:the-option-element-5><a href=#the-option-element>option</a></code> element that is a descendant of the <code id=the-datalist-element:the-datalist-element-9><a href=#the-datalist-element>datalist</a></code> element,
  that is not <a href=#concept-option-disabled id=the-datalist-element:concept-option-disabled>disabled</a>, and whose <a href=#concept-option-value id=the-datalist-element:concept-option-value>value</a> is a string that isn't the empty string, represents a
  suggestion. Each suggestion has a <a href=#concept-option-value id=the-datalist-element:concept-option-value-2>value</a> and a <a href=#concept-option-label id=the-datalist-element:concept-option-label>label</a>.

  <dl class=domintro><dt><code><var>datalist</var>.<span id=dom-datalist-options>options</span></code><dd>
    <p>Returns an <code id=the-datalist-element:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=the-datalist-element:the-option-element-6><a href=#the-option-element>option</a></code> elements of the
    <code id=the-datalist-element:the-datalist-element-10><a href=#the-datalist-element>datalist</a></code> element.</p>
   </dl>

  


  <h4 id=the-optgroup-element><span class=secno>4.10.9</span> The <dfn data-dfn-type=element><code>optgroup</code></dfn> element<a href=#the-optgroup-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup title="The <optgroup> HTML element creates a grouping of options within a <select> element.">Element/optgroup</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-optgroup-element:concept-element-categories>Categories</a>:<dd><a id=the-optgroup-element:select-element-inner-content-elements-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content elements</a>.<dt><a href=dom.html#concept-element-contexts id=the-optgroup-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a descendant of a <code id=the-optgroup-element:the-select-element><a href=#the-select-element>select</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-optgroup-element:concept-element-content-model>Content model</a>:<dd>Zero or one <code id=the-optgroup-element:the-legend-element><a href=#the-legend-element>legend</a></code> element followed by zero or more <a id=the-optgroup-element:optgroup-element-inner-content-elements-2 href=dom.html#optgroup-element-inner-content-elements-2><code>optgroup</code>
   element inner content elements</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-optgroup-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>An <code id=the-optgroup-element:the-optgroup-element><a href=#the-optgroup-element>optgroup</a></code> element's <a href=syntax.html#syntax-end-tag id=the-optgroup-element:syntax-end-tag>end tag</a> can be omitted
  if the <code id=the-optgroup-element:the-optgroup-element-2><a href=#the-optgroup-element>optgroup</a></code> element  is
  immediately followed by another <code id=the-optgroup-element:the-optgroup-element-3><a href=#the-optgroup-element>optgroup</a></code> element, if it is immediately followed by an
  <code id=the-optgroup-element:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code> element, or if  there is no more content in the parent
  element.<dt><a href=dom.html#concept-element-attributes id=the-optgroup-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-optgroup-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-optgroup-element:attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-optgroup-element:attr-optgroup-label><a href=#attr-optgroup-label>label</a></code> —  User-visible label
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-optgroup-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-optgroup>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-optgroup>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-optgroup-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLOptGroupElement</code>.</dl>

  <p>The <code id=the-optgroup-element:the-optgroup-element-4><a href=#the-optgroup-element>optgroup</a></code> element <a id=the-optgroup-element:represents href=dom.html#represents>represents</a> a group of <code id=the-optgroup-element:the-option-element><a href=#the-option-element>option</a></code>
  elements with a common label.</p>

  <p>The element's group of <code id=the-optgroup-element:the-option-element-2><a href=#the-option-element>option</a></code> elements consists of the <code id=the-optgroup-element:the-option-element-3><a href=#the-option-element>option</a></code>
  elements that are children of the <code id=the-optgroup-element:the-optgroup-element-5><a href=#the-optgroup-element>optgroup</a></code> element.</p>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=optgroup id=attr-optgroup-disabled data-dfn-type=element-attr><code>disabled</code></dfn> attribute is a <a id=the-optgroup-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a> and can be used to <a href=#concept-option-disabled id=the-optgroup-element:concept-option-disabled>disable</a> a group
  of <code id=the-optgroup-element:the-option-element-4><a href=#the-option-element>option</a></code> elements together.</p>

  <p>The <dfn data-dfn-for=optgroup id=attr-optgroup-label data-dfn-type=element-attr><code>label</code></dfn>
  attribute must be specified if the <code id=the-optgroup-element:the-optgroup-element-6><a href=#the-optgroup-element>optgroup</a></code> has no child <code id=the-optgroup-element:the-legend-element-2><a href=#the-legend-element>legend</a></code>
  element.</p>

  <p>The <code id=the-optgroup-element:the-optgroup-element-7><a href=#the-optgroup-element>optgroup</a></code> <a href=infrastructure.html#html-element-removing-steps id=the-optgroup-element:html-element-removing-steps>HTML element removing
  steps</a>, given <var>removedNode</var> and <var>oldParent</var>, are:</p>

  <ol><li><p>If <var>oldParent</var> is a <code id=the-optgroup-element:the-select-element-2><a href=#the-select-element>select</a></code> element and <var>removedNode</var> has an
   <code id=the-optgroup-element:the-option-element-5><a href=#the-option-element>option</a></code> child, then run <var>oldParent</var>'s <span>selectedness setting
   algorithm</span>.</ol>

  <p>The <code id=the-optgroup-element:the-optgroup-element-8><a href=#the-optgroup-element>optgroup</a></code> <a id=the-optgroup-element:html-element-moving-steps href=infrastructure.html#html-element-moving-steps>HTML element moving steps</a>, given <var>movedNode</var>
  and <var>oldParent</var>, are:</p>

  <ol><li><p>Run the <code id=the-optgroup-element:the-optgroup-element-9><a href=#the-optgroup-element>optgroup</a></code> <a id=the-optgroup-element:html-element-removing-steps-2 href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a> given
   <var>movedNode</var> and <var>oldParent</var>.</ol>

  <p>To <dfn id=concept-optgroup-label>get an <code>optgroup</code> element's label</dfn>,
  given an <code id=the-optgroup-element:the-optgroup-element-10><a href=#the-optgroup-element>optgroup</a></code> <var>optgroup</var>:</p>

  <ol><li><p>If <var>optgroup</var> has a child <code id=the-optgroup-element:the-legend-element-3><a href=#the-legend-element>legend</a></code> element, then return the result of
   <a href=https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace id=the-optgroup-element:strip-and-collapse-ascii-whitespace data-x-internal=strip-and-collapse-ascii-whitespace>stripping and collapsing ASCII
   whitespace</a> from the concatenation of <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-optgroup-element:concept-cd-data data-x-internal=concept-cd-data>data</a> of all the
   <code id=the-optgroup-element:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node descendants of <var>optgroup</var>'s first child <code id=the-optgroup-element:the-legend-element-4><a href=#the-legend-element>legend</a></code>
   element, in <a id=the-optgroup-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, excluding any that are descendants of descendants of the
   <code id=the-optgroup-element:the-legend-element-5><a href=#the-legend-element>legend</a></code> that are themselves <code id=the-optgroup-element:the-script-element><a href=scripting.html#the-script-element>script</a></code> or <a id=the-optgroup-element:svg-script href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG
   <code>script</code></a> elements.<li><p>Otherwise, return the value of <var>optgroup</var>'s <code id=the-optgroup-element:attr-optgroup-label-2><a href=#attr-optgroup-label>label</a></code> attribute.</ol>

  <p>The value of the <a href=#concept-optgroup-label id=the-optgroup-element:concept-optgroup-label><code>optgroup</code> label
  algorithm</a> gives the name of the group, for the purposes of the user interface. </p>

  <p class=note>There is no way to select an <code id=the-optgroup-element:the-optgroup-element-11><a href=#the-optgroup-element>optgroup</a></code> element. Only
  <code id=the-optgroup-element:the-option-element-6><a href=#the-option-element>option</a></code> elements can be selected. An <code id=the-optgroup-element:the-optgroup-element-12><a href=#the-optgroup-element>optgroup</a></code> element merely provides a
  label for a group of <code id=the-optgroup-element:the-option-element-7><a href=#the-option-element>option</a></code> elements.</p>

  <div class=example>

   <p>The following snippet shows how a set of lessons from three courses could be offered in a
   <code id=the-optgroup-element:the-select-element-3><a href=#the-select-element>select</a></code> drop-down widget:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;courseselector.dll&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;get&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Which course would you like to watch today?
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Course:
  <c- p>&lt;</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;c&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>optgroup</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;8.01 Physics I: Classical Mechanics&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.01.1&quot;</c-><c- p>&gt;</c->Lecture 01: Powers of Ten
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.01.2&quot;</c-><c- p>&gt;</c->Lecture 02: 1D Kinematics
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.01.3&quot;</c-><c- p>&gt;</c->Lecture 03: Vectors
   <c- p>&lt;</c-><c- f>optgroup</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;8.02 Electricity and Magnetism&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.02.1&quot;</c-><c- p>&gt;</c->Lecture 01: What holds our world together?
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.02.2&quot;</c-><c- p>&gt;</c->Lecture 02: Electric Field
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.02.3&quot;</c-><c- p>&gt;</c->Lecture 03: Electric Flux
   <c- p>&lt;</c-><c- f>optgroup</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;8.03 Physics III: Vibrations and Waves&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.03.1&quot;</c-><c- p>&gt;</c->Lecture 01: Periodic Phenomenon
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.03.2&quot;</c-><c- p>&gt;</c->Lecture 02: Beats
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.03.3&quot;</c-><c- p>&gt;</c->Lecture 03: Forced Oscillations with Damping
  <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;▶ Play&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-option-element><span class=secno>4.10.10</span> The <dfn data-dfn-type=element><code>option</code></dfn> element<a href=#the-option-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option title="The <option> HTML element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.">Element/option</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-option-element:concept-element-categories>Categories</a>:<dd><a id=the-option-element:select-element-inner-content-elements-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content elements</a>.<dd><a id=the-option-element:optgroup-element-inner-content-elements-2 href=dom.html#optgroup-element-inner-content-elements-2><code>optgroup</code> element inner content elements</a>.<dt><a href=dom.html#concept-element-contexts id=the-option-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a descendant of a <code id=the-option-element:the-select-element><a href=#the-select-element>select</a></code> element.<dd>As a descendant of a <code id=the-option-element:the-datalist-element><a href=#the-datalist-element>datalist</a></code> element.<dd>As a descendant of an <code id=the-option-element:the-optgroup-element><a href=#the-optgroup-element>optgroup</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-option-element:concept-element-content-model>Content model</a>:<dd>If the element has a <code id=the-option-element:attr-option-label><a href=#attr-option-label>label</a></code> attribute and a <code id=the-option-element:attr-option-value><a href=#attr-option-value>value</a></code> attribute: <a href=dom.html#concept-content-nothing id=the-option-element:concept-content-nothing>Nothing</a>.<dd>If the element has a <code id=the-option-element:attr-option-label-2><a href=#attr-option-label>label</a></code> attribute but no <code id=the-option-element:attr-option-value-2><a href=#attr-option-value>value</a></code> attribute: <a href=dom.html#text-content id=the-option-element:text-content>Text</a>.<dd>If the element has no <code id=the-option-element:attr-option-label-3><a href=#attr-option-label>label</a></code> attribute and is not a
   descendant of a <code id=the-option-element:the-datalist-element-2><a href=#the-datalist-element>datalist</a></code> element: Zero or more <a id=the-option-element:option-element-inner-content-elements-2 href=dom.html#option-element-inner-content-elements-2><code>option</code> element
   inner content elements</a>.<dd>If the element has no <code id=the-option-element:attr-option-label-4><a href=#attr-option-label>label</a></code> attribute and is a
   descendant of a <code id=the-option-element:the-datalist-element-3><a href=#the-datalist-element>datalist</a></code> element: <a href=dom.html#text-content id=the-option-element:text-content-2>Text</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-option-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>An <code id=the-option-element:the-option-element><a href=#the-option-element>option</a></code> element's <a href=syntax.html#syntax-end-tag id=the-option-element:syntax-end-tag>end tag</a> can be omitted if
  the <code id=the-option-element:the-option-element-2><a href=#the-option-element>option</a></code> element is immediately followed by another <code id=the-option-element:the-option-element-3><a href=#the-option-element>option</a></code> element, if
  it is immediately followed by an <code id=the-option-element:the-optgroup-element-2><a href=#the-optgroup-element>optgroup</a></code> element, if it is immediately followed by
  an <code id=the-option-element:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code> element, or if there is no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-option-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-option-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-option-element:attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-option-element:attr-option-label-5><a href=#attr-option-label>label</a></code> —  User-visible label
     <dd><code id=the-option-element:attr-option-selected><a href=#attr-option-selected>selected</a></code> —  Whether the option is selected by default
     <dd><code id=the-option-element:attr-option-value-3><a href=#attr-option-value>value</a></code> —  Value to be used for <a id=the-option-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-option-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-option>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-option>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-option-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLOptionElement</code>.</dl>

  <p>The <code id=the-option-element:the-option-element-4><a href=#the-option-element>option</a></code> element <a id=the-option-element:represents href=dom.html#represents>represents</a> an option in a <code id=the-option-element:the-select-element-2><a href=#the-select-element>select</a></code>
  element or as part of a list of suggestions in a <code id=the-option-element:the-datalist-element-4><a href=#the-datalist-element>datalist</a></code> element.</p>

  <p>In certain circumstances described in the definition of the <code id=the-option-element:the-select-element-3><a href=#the-select-element>select</a></code> element, an
  <code id=the-option-element:the-option-element-5><a href=#the-option-element>option</a></code> element can be a <code id=the-option-element:the-select-element-4><a href=#the-select-element>select</a></code> element's <a href=#placeholder-label-option id=the-option-element:placeholder-label-option>placeholder label
  option</a>. A <a href=#placeholder-label-option id=the-option-element:placeholder-label-option-2>placeholder label option</a> does not represent an actual option, but
  instead represents a label for the <code id=the-option-element:the-select-element-5><a href=#the-select-element>select</a></code> control.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=option id=attr-option-disabled data-dfn-type=element-attr><code>disabled</code></dfn>
  attribute is a <a id=the-option-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. An <code id=the-option-element:the-option-element-6><a href=#the-option-element>option</a></code> element is <dfn id=concept-option-disabled>disabled</dfn> if its <code id=the-option-element:attr-option-disabled-2><a href=#attr-option-disabled>disabled</a></code> attribute is present or if it is a child of an
  <code id=the-option-element:the-optgroup-element-3><a href=#the-optgroup-element>optgroup</a></code> element whose <code id=the-option-element:attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code>
  attribute is present.</p>

  

  <p class=note>Being <a href=#concept-option-disabled id=the-option-element:concept-option-disabled>disabled</a> does not prevent all
  modifications to the <code id=the-option-element:the-option-element-7><a href=#the-option-element>option</a></code> element. For example, its <span>selectedness</span> could be modified programmatically from
  JavaScript. Or, it could be indirectly modified by user action, e.g., if other non-disabled
  <code id=the-option-element:the-option-element-8><a href=#the-option-element>option</a></code> elements in the <code id=the-option-element:the-select-element-6><a href=#the-select-element>select</a></code> element were modified.</p>

  <p>The <dfn data-dfn-for=option id=attr-option-label data-dfn-type=element-attr><code>label</code></dfn>
  attribute provides a label for element. The <dfn id=concept-option-label>label</dfn> of an
  <code id=the-option-element:the-option-element-9><a href=#the-option-element>option</a></code> element is the value of the <code id=the-option-element:attr-option-label-6><a href=#attr-option-label>label</a></code>
  content attribute, if there is one and its value is not the empty string, or, otherwise, the value
  of the element's <code id=the-option-element:dom-option-text><a href=#dom-option-text>text</a></code> IDL attribute.</p>

  <p>The <code id=the-option-element:attr-option-label-7><a href=#attr-option-label>label</a></code> content attribute, if specified, must not be
  empty.</p>

  <p>The <dfn data-dfn-for=option id=attr-option-value data-dfn-type=element-attr><code>value</code></dfn>
  attribute provides a value for element. The <dfn id=concept-option-value>value</dfn> of an
  <code id=the-option-element:the-option-element-10><a href=#the-option-element>option</a></code> element is the value of the <code id=the-option-element:attr-option-value-4><a href=#attr-option-value>value</a></code>
  content attribute, if there is one, or, if there is not, the result of <span>collect option
  text</span> given <a id=the-option-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and false.</p>

  <p>The <dfn data-dfn-for=option id=attr-option-selected data-dfn-type=element-attr><code>selected</code></dfn>
  attribute is a <a id=the-option-element:boolean-attribute-2 href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. It represents the default <span>selectedness</span> of the element.</p>

  

  <p>A <code id=the-option-element:the-select-element-7><a href=#the-select-element>select</a></code> element whose <code id=the-option-element:attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
  attribute is not specified must not have more than one descendant <code id=the-option-element:the-option-element-11><a href=#the-option-element>option</a></code> element with
  its <code id=the-option-element:attr-option-selected-2><a href=#attr-option-selected>selected</a></code> attribute set.</p>

  

  <p>The <code id=the-option-element:the-option-element-12><a href=#the-option-element>option</a></code> <a id=the-option-element:html-element-insertion-steps href=infrastructure.html#html-element-insertion-steps>HTML element insertion steps</a>, given
  <var>insertedOption</var>, are:</p>

  <ol><li>
    <p>For each <var>ancestor</var> of <var>insertedOption</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-ancestor id=the-option-element:ancestor data-x-internal=ancestor>ancestors</a> in reverse <a id=the-option-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>ancestor</var> is a <code id=the-option-element:the-select-element-8><a href=#the-select-element>select</a></code> element, then run the <span>selectedness
     setting algorithm</span> given <var>ancestor</var> and return.</ol>
   </ol>

  <p>The <code id=the-option-element:the-option-element-13><a href=#the-option-element>option</a></code> <a id=the-option-element:html-element-removing-steps href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a>, given
  <var>removedOption</var> and <var>oldParent</var>, are:</p>

  <ol><li>
    <p>For each <var>ancestor</var> of <var>oldParent</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor id=the-option-element:inclusive-ancestor data-x-internal=inclusive-ancestor>inclusive ancestors</a> in reverse <a id=the-option-element:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>ancestor</var> is a <code id=the-option-element:the-select-element-9><a href=#the-select-element>select</a></code> element, then run the <span>selectedness
     setting algorithm</span> given <var>ancestor</var> and return.</ol>
  </ol>

  <p>The <code id=the-option-element:the-option-element-14><a href=#the-option-element>option</a></code> <a id=the-option-element:html-element-moving-steps href=infrastructure.html#html-element-moving-steps>HTML element moving steps</a>, given <var>movedNode</var> and
  <var>oldParent</var>, are:</p>

  <ol><li><p>Run the <code id=the-option-element:the-option-element-15><a href=#the-option-element>option</a></code> <a id=the-option-element:html-element-removing-steps-2 href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a> given
   <var>movedNode</var> and <var>oldParent</var>.<li><p>Run the <code id=the-option-element:the-option-element-16><a href=#the-option-element>option</a></code> <a id=the-option-element:html-element-insertion-steps-2 href=infrastructure.html#html-element-insertion-steps>HTML element insertion steps</a> given
   <var>movedNode</var>.</ol>

  <p>To get the <dfn id=option-element-nearest-ancestor-select><code>option</code> element nearest ancestor <code>select</code></dfn> given an
  <code id=the-option-element:the-option-element-17><a href=#the-option-element>option</a></code> <var>option</var>, run these steps. They return a <code id=the-option-element:the-select-element-10><a href=#the-select-element>select</a></code> or
  null.</p>

  <ol><li>
    <p>For each <var>ancestor</var> of <var>option</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-ancestor id=the-option-element:ancestor-2 data-x-internal=ancestor>ancestors</a>,
    in reverse <a id=the-option-element:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>ancestor</var> is a <code id=the-option-element:the-select-element-11><a href=#the-select-element>select</a></code>, then return
     <var>ancestor</var>.</ol>
   <li><p>Return null.</ol>

  <p>To <dfn id=maybe-clone-an-option-into-selectedcontent>maybe clone an <code>option</code> into <code>selectedcontent</code></dfn>, given an
  <code id=the-option-element:the-option-element-18><a href=#the-option-element>option</a></code> <var>option</var>:</p>

  <ol><li><p>Let <var>select</var> be <var>option</var>'s <a href=#option-element-nearest-ancestor-select id=the-option-element:option-element-nearest-ancestor-select><code>option</code> element nearest
   ancestor <code>select</code></a>.<li>
    <p>If all of the following conditions are true:</p>

    <ul><li><p><var>select</var> is not null;<li><p><var>option</var>'s <span>selectedness</span> is
     true; and<li><p><var>select</var>'s <a href=#select-enabled-selectedcontent id=the-option-element:select-enabled-selectedcontent>enabled
     <code>selectedcontent</code></a> is not null,</ul>

    <p>then run <a href=#clone-an-option-into-a-selectedcontent id=the-option-element:clone-an-option-into-a-selectedcontent>clone an <code>option</code> into a <code>selectedcontent</code></a> given
    <var>option</var> and <var>select</var>'s <a href=#select-enabled-selectedcontent id=the-option-element:select-enabled-selectedcontent-2>enabled
    <code>selectedcontent</code></a>.</p>
   </ol>

  <p>To <dfn id=clone-selected-option-into-select-button>clone selected <code>option</code> into <code>select</code> button</dfn>, given a
  <code id=the-option-element:the-select-element-12><a href=#the-select-element>select</a></code> element <var>select</var>:</p>

  <ol><li><p>Let <var>option</var> be the first element of <var>select</var>'s <span>option list</span> whose <span>selectedness</span> is set to true, if such an element
   exists; otherwise null.<li><p>Let <var>text</var> be the empty string.<li><p>If <var>option</var> is not null, then set <var>text</var> to <var>option</var>'s <span>label</span>.<li><p>Set <var>select</var>'s <span>select fallback button text</span> to
   <var>text</var>.</ol>

  <dl class=domintro><dt><code><var>option</var>.<span id=dom-option-selected>selected</span></code><dd>
    <p>Returns true if the element is selected, and false otherwise.</p>

    <p>Can be set, to override the current state of the element.</p>
   <dt><code><var>option</var>.<span id=dom-option-index>index</span></code><dd><p>Returns the index of the element in its <code id=the-option-element:the-select-element-13><a href=#the-select-element>select</a></code> element's <code id=the-option-element:dom-select-options><a href=#dom-select-options>options</a></code> list.<dt><code><var>option</var>.<span id=dom-option-form>form</span></code><dd><p>Returns the element's <code id=the-option-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element, if any, or null otherwise.<dt><code><var>option</var>.<span id=dom-option-text>text</span></code><dd>
    <p>Same as <code id=the-option-element:textcontent><a data-x-internal=textcontent href=https://dom.spec.whatwg.org/#dom-node-textcontent>textContent</a></code>, except that spaces are collapsed and <code id=the-option-element:the-script-element><a href=scripting.html#the-script-element>script</a></code>
    elements are skipped.</p>
   <dt><code><var>option</var> = new <span id=dom-option>Option</span>([ <var>text</var> [, <var>value</var> [, <var>defaultSelected</var> [, <var>selected</var> ] ] ] ])</code><dd>
    <p>Returns a new <code id=the-option-element:the-option-element-19><a href=#the-option-element>option</a></code> element.</p>

    <p>The <var>text</var> argument sets the contents of the element.</p>

    <p>The <var>value</var> argument sets the <code id=the-option-element:attr-option-value-5><a href=#attr-option-value>value</a></code>
    attribute.</p>

    <p>The <var>defaultSelected</var> argument sets the <code id=the-option-element:attr-option-selected-3><a href=#attr-option-selected>selected</a></code> attribute.</p>

    <p>The <var>selected</var> argument sets whether or not the element is selected. If it is
    omitted, even if the <var>defaultSelected</var> argument is true, the element is not
    selected.</p>
   </dl>

  

  <p id=note-option-no-value class=note><a href=#note-option-no-value class=self-link></a>When no <code id=the-option-element:attr-option-value-6><a href=#attr-option-value>value</a></code>
  attribute is set on the <code id=the-option-element:the-option-element-20><a href=#the-option-element>option</a></code> element, its text contents are used to generate a
  submittable value. In the case that the <code id=the-option-element:the-option-element-21><a href=#the-option-element>option</a></code> element has child elements, this can
  lead to unexpected results such as <code id=the-option-element:the-option-element-22><a href=#the-option-element>option</a></code> elements which render differently but have
  the same value. In order to address this, setting the <code id=the-option-element:attr-option-value-7><a href=#attr-option-value>value</a></code> attribute on <code id=the-option-element:the-option-element-23><a href=#the-option-element>option</a></code> elements is
  recommended.</p>



  <h4 id=the-textarea-element><span class=secno>4.10.11</span> The <dfn data-dfn-type=element><code>textarea</code></dfn> element<a href=#the-textarea-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea title="The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.">Element/textarea</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-textarea-element:concept-element-categories>Categories</a>:<dd><a id=the-textarea-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-textarea-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-textarea-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a href=forms.html#category-listed id=the-textarea-element:category-listed>Listed</a>, <a href=forms.html#category-label id=the-textarea-element:category-label>labelable</a>, <a href=forms.html#category-submit id=the-textarea-element:category-submit>submittable</a>, <a href=forms.html#category-reset id=the-textarea-element:category-reset>resettable</a>, and <a href=forms.html#category-autocapitalize id=the-textarea-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-textarea-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-textarea-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-textarea-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-textarea-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-textarea-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#text-content id=the-textarea-element:text-content>Text</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-textarea-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-textarea-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-textarea-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-textarea-element:attr-fe-autocomplete><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> —  Hint for form autofill feature
     <dd><code id=the-textarea-element:attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code> —  Maximum number of characters per line
     <dd><code id=the-textarea-element:attr-fe-dirname><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code> —  Name of form control to use for sending the element's <a href=dom.html#the-directionality id=the-textarea-element:the-directionality>directionality</a> in <a id=the-textarea-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-textarea-element:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-textarea-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-textarea-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-textarea-element:attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code> —  Maximum <a id=the-textarea-element:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of value
     <dd><code id=the-textarea-element:attr-textarea-minlength><a href=#attr-textarea-minlength>minlength</a></code> —  Minimum <a id=the-textarea-element:length-2 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of value
     <dd><code id=the-textarea-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> —  Name of the element to use for <a id=the-textarea-element:form-submission-2-2 href=form-control-infrastructure.html#form-submission-2>form submission</a> and in the <code id=the-textarea-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API 
     <dd><code id=the-textarea-element:attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code> —  User-visible label to be placed within the form control
     <dd><code id=the-textarea-element:attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> —  Whether to allow the value to be edited by the user
     <dd><code id=the-textarea-element:attr-textarea-required><a href=#attr-textarea-required>required</a></code> —  Whether the control is required for <a id=the-textarea-element:form-submission-2-3 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-textarea-element:attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code> —  Number of lines to show
     <dd><code id=the-textarea-element:attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code> —  How the value of the form control is to be wrapped for <a id=the-textarea-element:form-submission-2-4 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-textarea-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-textarea>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-textarea>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-textarea-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTextAreaElement</code>.</dl>

  <p>The <code id=the-textarea-element:the-textarea-element><a href=#the-textarea-element>textarea</a></code> element <a id=the-textarea-element:represents href=dom.html#represents>represents</a> a multiline plain text edit
  control. The contents of the control represent the control's default value.</p>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-readonly data-dfn-type=element-attr><code>readonly</code></dfn> attribute is a <a id=the-textarea-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a> used to control whether the text can be edited by the user or not.</p>

  <div class=example>

   <p>In this example, a text control is marked read-only because it represents a read-only
   file:</p>

   <pre><code class='html'>Filename: <c- p>&lt;</c-><c- f>code</c-><c- p>&gt;</c->/etc/bash.bashrc<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;buffer&quot;</c-> <c- e>readonly</c-><c- p>&gt;</c->
# System-wide .bashrc file for interactive bash(1) shells.

# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.

# If not running interactively, don&apos;t do anything
[ -z &quot;$PS1&quot; ] <c- ni>&amp;amp;&amp;amp;</c-> return

...<c- p>&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c-></code></pre>

  </div>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-cols data-dfn-type=element-attr><code>cols</code></dfn>
  attribute specifies the expected maximum number of characters per line. If the <code id=the-textarea-element:attr-textarea-cols-2><a href=#attr-textarea-cols>cols</a></code> attribute is specified, its value must be a <a id=the-textarea-element:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid
  non-negative integer</a> greater than zero. </p>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-rows data-dfn-type=element-attr><code>rows</code></dfn>
  attribute specifies the number of lines to show. If the <code id=the-textarea-element:attr-textarea-rows-2><a href=#attr-textarea-rows>rows</a></code> attribute is specified, its value must be a <a id=the-textarea-element:valid-non-negative-integer-2 href=common-microsyntaxes.html#valid-non-negative-integer>valid
  non-negative integer</a> greater than zero. </p>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-wrap data-dfn-type=element-attr><code>wrap</code></dfn>
  attribute is an <a id=the-textarea-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=textarea/wrap id=attr-textarea-wrap-soft data-dfn-type=attr-value><code>soft</code></dfn>
     <td><dfn id=attr-textarea-wrap-soft-state>Soft</dfn>
     <td>Text is not to be wrapped when submitted (though can still be wrapped in the rendering).
    <tr><td><dfn data-dfn-for=textarea/wrap id=attr-textarea-wrap-hard data-dfn-type=attr-value><code>hard</code></dfn>
     <td><dfn id=attr-textarea-wrap-hard-state>Hard</dfn>
     <td>Text is to have newlines added by the user agent so that the text is wrapped when it is
     submitted.
  </table>

  <p>The attribute's <i id=the-textarea-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-textarea-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href=#attr-textarea-wrap-soft-state id=the-textarea-element:attr-textarea-wrap-soft-state>Soft</a> state.</p>

  <p>If the element's <code id=the-textarea-element:attr-textarea-wrap-2><a href=#attr-textarea-wrap>wrap</a></code> attribute is in the <a href=#attr-textarea-wrap-hard-state id=the-textarea-element:attr-textarea-wrap-hard-state>Hard</a> state, the <code id=the-textarea-element:attr-textarea-cols-3><a href=#attr-textarea-cols>cols</a></code> attribute must be specified.</p>

  

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-maxlength data-dfn-type=element-attr><code>maxlength</code></dfn> attribute is a <a href=form-control-infrastructure.html#attr-fe-maxlength id=the-textarea-element:attr-fe-maxlength>form control <code>maxlength</code> attribute</a>.</p>

  <p>If the <code id=the-textarea-element:the-textarea-element-2><a href=#the-textarea-element>textarea</a></code> element has a <a id=the-textarea-element:maximum-allowed-value-length href=form-control-infrastructure.html#maximum-allowed-value-length>maximum allowed value length</a>, then the
  element's children must be such that the <a id=the-textarea-element:length-3 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the value of the element's
  <a id=the-textarea-element:descendant-text-content href=https://dom.spec.whatwg.org/#concept-descendant-text-content data-x-internal=descendant-text-content>descendant text content</a> with <a href=https://infra.spec.whatwg.org/#normalize-newlines id=the-textarea-element:normalize-newlines data-x-internal=normalize-newlines>newlines
  normalized</a> is less than or equal to the element's <a id=the-textarea-element:maximum-allowed-value-length-2 href=form-control-infrastructure.html#maximum-allowed-value-length>maximum allowed value
  length</a>.</p>

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-minlength data-dfn-type=element-attr><code>minlength</code></dfn> attribute is a <a href=form-control-infrastructure.html#attr-fe-minlength id=the-textarea-element:attr-fe-minlength>form control <code>minlength</code> attribute</a>.</p>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-required data-dfn-type=element-attr><code>required</code></dfn> attribute is a <a id=the-textarea-element:boolean-attribute-2 href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a>. When specified, the user will be required to enter a value before submitting the
  form.</p>

  


  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-placeholder data-dfn-type=element-attr><code>placeholder</code></dfn> attribute represents a <em>short</em>
  hint (a word or short phrase) intended to aid the user with data entry when the control has no
  value. A hint could be a sample value or a brief description of the expected format.</p>

  <p>The <code id=the-textarea-element:attr-textarea-placeholder-2><a href=#attr-textarea-placeholder>placeholder</a></code> attribute should not be used as
  an alternative to a <code id=the-textarea-element:the-label-element><a href=forms.html#the-label-element>label</a></code>. For a longer hint or other advisory text, the <code id=the-textarea-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute is more appropriate.</p>

  <p class=note>These mechanisms are very similar but subtly different: the hint given by the
  control's <code id=the-textarea-element:the-label-element-2><a href=forms.html#the-label-element>label</a></code> is shown at all times; the short hint given in the <code id=the-textarea-element:attr-textarea-placeholder-3><a href=#attr-textarea-placeholder>placeholder</a></code> attribute is shown before the user enters a
  value; and the hint in the <code id=the-textarea-element:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute is shown when the user
  requests further help.</p>

  

  <p>
  The <code id=the-textarea-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name.
  The <code id=the-textarea-element:attr-fe-dirname-2><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code> attribute controls how the element's <a href=dom.html#the-directionality id=the-textarea-element:the-directionality-2>directionality</a> is submitted.
  The <code id=the-textarea-element:attr-fe-disabled-2><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> attribute is used to make the control
  non-interactive and to prevent its value from being submitted.
  The <code id=the-textarea-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-textarea-element:the-textarea-element-3><a href=#the-textarea-element>textarea</a></code> element with its <a id=the-textarea-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>.
  The <code id=the-textarea-element:attr-fe-autocomplete-2><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> attribute controls how the user agent
  provides autofill behavior.
  </p>

  <dl class=domintro><dt><code><var>textarea</var>.<span id=dom-textarea-type>type</span></code><dd><p>Returns the string "<code>textarea</code>".<dt><code><var>textarea</var>.<span id=dom-textarea-value>value</span></code><dd>
    <p>Returns the current value of the element.</p>

    <p>Can be set, to change the value.</p>
   </dl>

  

  <div class=example>

   <p>Here is an example of a <code id=the-textarea-element:the-textarea-element-4><a href=#the-textarea-element>textarea</a></code> being used for unrestricted free-form text input
   in a form:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->If you have any comments, please let us know: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>cols</c-><c- o>=</c-><c- s>80</c-> <c- e>name</c-><c- o>=</c-><c- s>comments</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>To specify a maximum length for the comments, one can use the <code id=the-textarea-element:attr-textarea-maxlength-2><a href=#attr-textarea-maxlength>maxlength</a></code> attribute:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->If you have any short comments, please let us know: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>cols</c-><c- o>=</c-><c- s>80</c-> <c- e>name</c-><c- o>=</c-><c- s>comments</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>200</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>To give a default value, text can be included inside the element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->If you have any comments, please let us know: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>cols</c-><c- o>=</c-><c- s>80</c-> <c- e>name</c-><c- o>=</c-><c- s>comments</c-><c- p>&gt;</c->You rock!<c- p>&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>You can also give a minimum length. Here, a letter needs to be filled out by the user; a
   template (which is shorter than the minimum length) is provided, but is insufficient to submit
   the form:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>textarea</c-> <c- e>required</c-> <c- e>minlength</c-><c- o>=</c-><c- s>&quot;500&quot;</c-><c- p>&gt;</c->Dear Madam Speaker,

Regarding your letter dated ...

...

Yours Sincerely,

...<c- p>&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c-></code></pre>

   <p>A placeholder can be given as well, to suggest the basic form to the user, without providing
   an explicit template:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>textarea</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;Dear Francine,</c->

<c- s>They closed the parks this week, so we won&apos;t be able to</c->
<c- s>meet your there. Should we just have dinner?</c->

<c- s>Love,</c->
<c- s>Daddy&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c-></code></pre>

   <p>To have the browser submit <a id=the-textarea-element:the-directionality-3 href=dom.html#the-directionality>the directionality</a> of the element along with the
   value, the <code id=the-textarea-element:attr-fe-dirname-3><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code> attribute can be specified:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->If you have any comments, please let us know (you may use either English or Hebrew for your comments):
<c- p>&lt;</c-><c- f>textarea</c-> <c- e>cols</c-><c- o>=</c-><c- s>80</c-> <c- e>name</c-><c- o>=</c-><c- s>comments</c-> <c- e>dirname</c-><c- o>=</c-><c- s>comments.dir</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-output-element><span class=secno>4.10.12</span> The <dfn data-dfn-type=element><code>output</code></dfn> element<a href=#the-output-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output title="The <output> HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.">Element/output</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-output-element:concept-element-categories>Categories</a>:<dd><a id=the-output-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-output-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a href=forms.html#category-listed id=the-output-element:category-listed>Listed</a>, <a href=forms.html#category-label id=the-output-element:category-label>labelable</a>, <a href=forms.html#category-reset id=the-output-element:category-reset>resettable</a>, and <a href=forms.html#category-autocapitalize id=the-output-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-output-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-output-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-output-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-output-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-output-element:concept-element-content-model>Content model</a>:<dd><a id=the-output-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-output-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-output-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-output-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-output-element:attr-output-for><a href=#attr-output-for>for</a></code> —  Specifies controls from which the output was calculated
     <dd><code id=the-output-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-output-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-output-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code>   — Name of the element to use in the <code id=the-output-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API.<dt><a href=dom.html#concept-element-accessibility-considerations id=the-output-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-output>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-output>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-output-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLOutputElement</code>.</dl>

  <p>The <code id=the-output-element:the-output-element><a href=#the-output-element>output</a></code> element <a id=the-output-element:represents href=dom.html#represents>represents</a> the result of a calculation performed
  by the application, or the result of a user action.</p>

  <p class=note>This element can be contrasted with the <code id=the-output-element:the-samp-element><a href=text-level-semantics.html#the-samp-element>samp</a></code> element, which is the
  appropriate element for quoting the output of other programs run previously.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for title="The for attribute is an allowed attribute for <label> and <output>. When used on a <label> element it indicates the form element that this label describes. When used on an <output> element it allows for an explicit relationship between the elements that represent values which are used in the output.">Attributes/for</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><p>The <dfn data-dfn-for=output id=attr-output-for data-dfn-type=element-attr><code>for</code></dfn> content
  attribute allows an explicit relationship to be made between the result of a calculation and the
  elements that represent the values that went into the calculation or that otherwise influenced the
  calculation. The <code id=the-output-element:attr-output-for-2><a href=#attr-output-for>for</a></code> attribute, if specified, must contain a
  string consisting of an <a id=the-output-element:unordered-set-of-unique-space-separated-tokens href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>, none of which
  are <a id=the-output-element:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> another token and each of which must have the value of an <a href=https://dom.spec.whatwg.org/#concept-id id=the-output-element:concept-id data-x-internal=concept-id>ID</a> of an element in the same <a id=the-output-element:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>.</p>

  <p>The <code id=the-output-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-output-element:the-output-element-2><a href=#the-output-element>output</a></code> element with its <a id=the-output-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>. The <code id=the-output-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name. The <code id=the-output-element:the-output-element-3><a href=#the-output-element>output</a></code>
  element is associated with a form so that it can be easily <a id=the-output-element:referenced href=dom.html#referenced>referenced</a> from the event
  handlers of form controls; the element's value itself is not submitted when the form is
  submitted.</p>

  

  <dl class=domintro><dt><code><var>output</var>.<span id=dom-output-value>value</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the element's current value.</p>

    <p>Can be set, to change the value.</p>
   <dt><code><var>output</var>.<span id=dom-output-defaultvalue>defaultValue</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the element's current default value.</p>

    <p>Can be set, to change the default value.</p>
   <dt><code><var>output</var>.<span id=dom-output-type>type</span></code><dd><p>Returns the string "<code>output</code>".</dl>

  

  <div class=example>

   <p>A simple calculator could use <code id=the-output-element:the-output-element-4><a href=#the-output-element>output</a></code> for its display of calculated results:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>onsubmit</c-><c- o>=</c-><c- s>&quot;return false&quot;</c-> <c- e>oninput</c-><c- o>=</c-><c- s>&quot;o.value = a.valueAsNumber + b.valueAsNumber&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>a</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>step</c-><c- o>=</c-><c- s>any</c-><c- p>&gt;</c-> +
 <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>b</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>step</c-><c- o>=</c-><c- s>any</c-><c- p>&gt;</c-> =
 <c- p>&lt;</c-><c- f>output</c-> <c- e>id</c-><c- o>=</c-><c- s>o</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;a b&quot;</c-><c- p>&gt;&lt;/</c-><c- f>output</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In this example, an <code id=the-output-element:the-output-element-5><a href=#the-output-element>output</a></code> element is used to report the results of a calculation performed by a remote
   server, as they come in:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>output</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;result&quot;</c-><c- p>&gt;&lt;/</c-><c- f>output</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> primeSource <c- o>=</c-> <c- k>new</c-> WebSocket<c- p>(</c-><c- t>&apos;ws://primes.example.net/&apos;</c-><c- p>);</c->
 primeSource<c- p>.</c->onmessage <c- o>=</c-> <c- a>function</c-> <c- p>(</c->event<c- p>)</c-> <c- p>{</c->
   document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;result&apos;</c-><c- p>).</c->value <c- o>=</c-> event<c- p>.</c->data<c- p>;</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-progress-element><span class=secno>4.10.13</span> The <dfn data-dfn-type=element><code>progress</code></dfn> element<a href=#the-progress-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress title="The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.">Element/progress</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-progress-element:concept-element-categories>Categories</a>:<dd><a id=the-progress-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-progress-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a href=forms.html#category-label id=the-progress-element:category-label>Labelable element</a>.<dd><a id=the-progress-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-progress-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-progress-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-progress-element:concept-element-content-model>Content model</a>:<dd><a id=the-progress-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>, but there must be no <code id=the-progress-element:the-progress-element><a href=#the-progress-element>progress</a></code> element descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-progress-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-progress-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-progress-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-progress-element:attr-progress-value><a href=#attr-progress-value>value</a></code> —  Current value of the element
     <dd><code id=the-progress-element:attr-progress-max><a href=#attr-progress-max>max</a></code> —  Upper bound of range
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-progress-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-progress>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-progress>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-progress-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLProgressElement</code>.</dl>

  <p>The <code id=the-progress-element:the-progress-element-2><a href=#the-progress-element>progress</a></code> element <a id=the-progress-element:represents href=dom.html#represents>represents</a> the completion progress of a task.
  The progress is either indeterminate, indicating that progress is being made but that it is not
  clear how much more work remains to be done before the task is complete (e.g. because the task is
  waiting for a remote host to respond), or the progress is a number in the range zero to a maximum,
  giving the fraction of work that has so far been completed.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max title="The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is applied. If the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.">Attributes/max</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><p>There are two attributes that determine the current task completion represented by the element.
  The <dfn data-dfn-for=progress id=attr-progress-value data-dfn-type=element-attr><code>value</code></dfn>
  attribute specifies how much of the task has been completed, and the <dfn data-dfn-for=progress id=attr-progress-max data-dfn-type=element-attr><code>max</code></dfn> attribute specifies how much work
  the task requires in total. The units are arbitrary and not specified.</p>

  <p class=note>To make a determinate progress bar, add a <code id=the-progress-element:attr-progress-value-2><a href=#attr-progress-value>value</a></code> attribute with the current progress (either a number from
  0.0 to 1.0, or, if the <code id=the-progress-element:attr-progress-max-2><a href=#attr-progress-max>max</a></code> attribute is specified, a number
  from 0 to the value of the <code id=the-progress-element:attr-progress-max-3><a href=#attr-progress-max>max</a></code> attribute). To make an
  indeterminate progress bar, remove the <code id=the-progress-element:attr-progress-value-3><a href=#attr-progress-value>value</a></code>
  attribute.</p>

  <p>Authors are encouraged to also include the current value and the maximum value inline as text
  inside the element, so that the progress is made available to users of legacy user agents.</p>

  <div class=example>

   <p>Here is a snippet of a web application that shows the progress of some automated task:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Task Progress<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Progress: <c- p>&lt;</c-><c- f>progress</c-> <c- e>id</c-><c- o>=</c-><c- s>p</c-> <c- e>max</c-><c- o>=</c-><c- s>100</c-><c- p>&gt;&lt;</c-><c- f>span</c-><c- p>&gt;</c->0<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->%<c- p>&lt;/</c-><c- f>progress</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>var</c-> progressBar <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;p&apos;</c-><c- p>);</c->
  <c- a>function</c-> updateProgress<c- p>(</c->newValue<c- p>)</c-> <c- p>{</c->
    progressBar<c- p>.</c->value <c- o>=</c-> newValue<c- p>;</c->
    progressBar<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;span&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>].</c->textContent <c- o>=</c-> newValue<c- p>;</c->
  <c- p>}</c->
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

   <p>(The <code>updateProgress()</code> method in this example would be called by some
   other code on the page to update the actual progress bar as the task progressed.)</p>

  </div>

  <p>The <code id=the-progress-element:attr-progress-value-4><a href=#attr-progress-value>value</a></code> and <code id=the-progress-element:attr-progress-max-4><a href=#attr-progress-max>max</a></code> attributes, when present, must have values that are <a href=common-microsyntaxes.html#valid-floating-point-number id=the-progress-element:valid-floating-point-number>valid floating-point numbers</a>. The <code id=the-progress-element:attr-progress-value-5><a href=#attr-progress-value>value</a></code> attribute, if present, must have a value greater than or
  equal to zero, and less than or equal to the value of the <code id=the-progress-element:attr-progress-max-5><a href=#attr-progress-max>max</a></code> attribute, if present, or 1.0, otherwise. The <code id=the-progress-element:attr-progress-max-6><a href=#attr-progress-max>max</a></code> attribute, if present, must have a value greater than
  zero.</p>

  <p class=note>The <code id=the-progress-element:the-progress-element-3><a href=#the-progress-element>progress</a></code> element is the wrong element to use for something that
  is just a gauge, as opposed to task progress. For instance, indicating disk space usage using
  <code id=the-progress-element:the-progress-element-4><a href=#the-progress-element>progress</a></code> would be inappropriate. Instead, the <code id=the-progress-element:the-meter-element><a href=#the-meter-element>meter</a></code> element is available
  for such use cases.</p>

  

  <dl class=domintro><dt><code><var>progress</var>.<span id=dom-progress-position>position</span></code><dd>
    <p>For a determinate progress bar (one with known current and maximum values), returns the
    result of dividing the current value by the maximum value.</p>

    <p>For an indeterminate progress bar, returns −1.</p>
   </dl>

  



  <h4 id=the-meter-element><span class=secno>4.10.14</span> The <dfn data-dfn-type=element><code>meter</code></dfn> element<a href=#the-meter-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter title="The <meter> HTML element represents either a scalar value within a known range or a fractional value.">Element/meter</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>10.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android no"><span>WebView Android</span><span>No</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>
  

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-meter-element:concept-element-categories>Categories</a>:<dd><a id=the-meter-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-meter-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a href=forms.html#category-label id=the-meter-element:category-label>Labelable element</a>.<dd><a id=the-meter-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-meter-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-meter-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-meter-element:concept-element-content-model>Content model</a>:<dd><a id=the-meter-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>, but there must be no <code id=the-meter-element:the-meter-element><a href=#the-meter-element>meter</a></code> element descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-meter-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-meter-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-meter-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-meter-element:attr-meter-value><a href=#attr-meter-value>value</a></code> —  Current value of the element
     <dd><code id=the-meter-element:attr-meter-min><a href=#attr-meter-min>min</a></code> —  Lower bound of range
     <dd><code id=the-meter-element:attr-meter-max><a href=#attr-meter-max>max</a></code> —  Upper bound of range
     <dd><code id=the-meter-element:attr-meter-low><a href=#attr-meter-low>low</a></code> —  High limit of low range
     <dd><code id=the-meter-element:attr-meter-high><a href=#attr-meter-high>high</a></code> —  Low limit of high range
     <dd><code id=the-meter-element:attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> —  Optimum value in gauge
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-meter-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-meter>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-meter>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-meter-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLMeterElement</code>.</dl>

  <p>The <code id=the-meter-element:the-meter-element-2><a href=#the-meter-element>meter</a></code> element <a id=the-meter-element:represents href=dom.html#represents>represents</a> a scalar measurement within a known
  range, or a fractional value; for example disk usage, the relevance of a query result, or the
  fraction of a voting population to have selected a particular candidate.</p>

  <p>This is also known as a gauge.</p>

  <p>The <code id=the-meter-element:the-meter-element-3><a href=#the-meter-element>meter</a></code> element should not be used to indicate progress (as in a progress bar).
  For that role, HTML provides a separate <code id=the-meter-element:the-progress-element><a href=#the-progress-element>progress</a></code> element.</p>

  <p class=note>The <code id=the-meter-element:the-meter-element-4><a href=#the-meter-element>meter</a></code> element also does not represent a scalar value of arbitrary
  range — for example, it would be wrong to use this to report a weight, or height, unless
  there is a known maximum value.</p>

  <p>There are six attributes that determine the semantics of the gauge represented by the
  element.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max title="The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is applied. If the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.">Attributes/max</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>10.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android no"><span>WebView Android</span><span>No</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min title="The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute.">Attributes/min</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>10.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android no"><span>WebView Android</span><span>No</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><p>The <dfn data-dfn-for=meter id=attr-meter-min data-dfn-type=element-attr><code>min</code></dfn> attribute
  specifies the lower bound of the range, and the <dfn data-dfn-for=meter id=attr-meter-max data-dfn-type=element-attr><code>max</code></dfn> attribute specifies the upper bound. The <dfn data-dfn-for=meter id=attr-meter-value data-dfn-type=element-attr><code>value</code></dfn> attribute specifies
  the value to have the gauge indicate as the "measured" value.</p>

  <p>The other three attributes can be used to segment the gauge's range into "low", "medium", and
  "high" parts, and to indicate which part of the gauge is the "optimum" part. The <dfn data-dfn-for=meter id=attr-meter-low data-dfn-type=element-attr><code>low</code></dfn> attribute specifies the range that is
  considered to be the "low" part, and the <dfn data-dfn-for=meter id=attr-meter-high data-dfn-type=element-attr><code>high</code></dfn> attribute specifies the range that is considered to be
  the "high" part. The <dfn data-dfn-for=meter id=attr-meter-optimum data-dfn-type=element-attr><code>optimum</code></dfn> attribute gives the position that is "optimum";
  if that is higher than the "high" value then this indicates that the higher the value, the better;
  if it's lower than the "low" mark then it indicates that lower values are better, and naturally if
  it is in between then it indicates that neither high nor low values are good.</p>

  <p> The <code id=the-meter-element:attr-meter-value-2><a href=#attr-meter-value>value</a></code> attribute must be specified. The <code id=the-meter-element:attr-meter-value-3><a href=#attr-meter-value>value</a></code>, <code id=the-meter-element:attr-meter-min-2><a href=#attr-meter-min>min</a></code>, <code id=the-meter-element:attr-meter-low-2><a href=#attr-meter-low>low</a></code>, <code id=the-meter-element:attr-meter-high-2><a href=#attr-meter-high>high</a></code>, <code id=the-meter-element:attr-meter-max-2><a href=#attr-meter-max>max</a></code>, and <code id=the-meter-element:attr-meter-optimum-2><a href=#attr-meter-optimum>optimum</a></code> attributes,
  when present, must have values that are <a href=common-microsyntaxes.html#valid-floating-point-number id=the-meter-element:valid-floating-point-number>valid
  floating-point numbers</a>.</p>

  <p>In addition, the attributes' values are further constrained:</p>

  <p>Let <var>value</var> be the <code id=the-meter-element:attr-meter-value-4><a href=#attr-meter-value>value</a></code> attribute's
  number.</p>

  <p>If the <code id=the-meter-element:attr-meter-min-3><a href=#attr-meter-min>min</a></code> attribute is specified, then let <var>minimum</var> be that attribute's value; otherwise, let it be 0.</p>

  <p>If the <code id=the-meter-element:attr-meter-max-3><a href=#attr-meter-max>max</a></code> attribute is specified, then let <var>maximum</var> be that attribute's value; otherwise, let it be 1.0.</p>

  <p>The following inequalities must hold, as applicable:</p>

  <ul><li><p><var>minimum</var> ≤ <var>value</var> ≤ <var>maximum</var><li><p><var>minimum</var> ≤ <code id=the-meter-element:attr-meter-low-3><a href=#attr-meter-low>low</a></code> ≤ <var>maximum</var>
   (if <code id=the-meter-element:attr-meter-low-4><a href=#attr-meter-low>low</a></code> is specified)<li><p><var>minimum</var> ≤ <code id=the-meter-element:attr-meter-high-3><a href=#attr-meter-high>high</a></code> ≤
   <var>maximum</var> (if <code id=the-meter-element:attr-meter-high-4><a href=#attr-meter-high>high</a></code> is specified)<li><p><var>minimum</var> ≤ <code id=the-meter-element:attr-meter-optimum-3><a href=#attr-meter-optimum>optimum</a></code> ≤
   <var>maximum</var> (if <code id=the-meter-element:attr-meter-optimum-4><a href=#attr-meter-optimum>optimum</a></code> is specified)<li><p><code id=the-meter-element:attr-meter-low-5><a href=#attr-meter-low>low</a></code> ≤ <code id=the-meter-element:attr-meter-high-5><a href=#attr-meter-high>high</a></code>
   (if both <code id=the-meter-element:attr-meter-low-6><a href=#attr-meter-low>low</a></code> and <code id=the-meter-element:attr-meter-high-6><a href=#attr-meter-high>high</a></code>
   are specified)</ul>

  <p class=note>If no minimum or maximum is specified, then the range is assumed to be 0..1, and
  the value thus has to be within that range.</p>

  <p>Authors are encouraged to include a textual representation of the gauge's state in the
  element's contents, for users of user agents that do not support the <code id=the-meter-element:the-meter-element-5><a href=#the-meter-element>meter</a></code>
  element.</p>

  <p>When used with <a id=the-meter-element:microdata href=microdata.html#microdata>microdata</a>, the <code id=the-meter-element:the-meter-element-6><a href=#the-meter-element>meter</a></code> element's <code id=the-meter-element:attr-meter-value-5><a href=#attr-meter-value>value</a></code> attribute provides the element's machine-readable value.</p>

  <div class=example>

   <p>The following examples show three gauges that would all be three-quarters full:</p>

   <pre><code class='html'>Storage space usage: <c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>6</c-> <c- e>max</c-><c- o>=</c-><c- s>8</c-><c- p>&gt;</c->6 blocks used (out of 8 total)<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'>Voter turnout: <c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>0.75</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;75%&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;graph75.png&quot;</c-><c- p>&gt;&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'>Tickets sold: <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;100&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;75&quot;</c-><c- p>&gt;&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></code></pre>

   <p>The following example is incorrect use of the element, because it doesn't give a range (and
   since the default maximum is 1, both of the gauges would end up looking maxed out):</p>

   <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The grapefruit pie had a radius of <c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>12</c-><c- p>&gt;</c->12cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->
and a height of <c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>2</c-><c- p>&gt;</c->2cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-> <c- c>&lt;!-- </c-><strong><c- c>BAD!</c-></strong><c- c> --&gt;</c-></code></pre>

   <p>Instead, one would either not include the meter element, or use the meter element with a
   defined range to give the dimensions in context compared to other pies:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The grapefruit pie had a radius of 12cm and a height of
2cm.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Radius: <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>20</c-> <c- e>value</c-><c- o>=</c-><c- s>12</c-><c- p>&gt;</c->12cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Height: <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>10</c-> <c- e>value</c-><c- o>=</c-><c- s>2</c-><c- p>&gt;</c->2cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>There is no explicit way to specify units in the <code id=the-meter-element:the-meter-element-7><a href=#the-meter-element>meter</a></code> element, but the units may
  be specified in the <code id=the-meter-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute in free-form text.</p>

  <div class=example>

   <p>The example above could be extended to mention the units:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Radius: <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>20</c-> <c- e>value</c-><c- o>=</c-><c- s>12</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;centimeters&quot;</c-><c- p>&gt;</c->12cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Height: <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>10</c-> <c- e>value</c-><c- o>=</c-><c- s>2</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;centimeters&quot;</c-><c- p>&gt;</c->2cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>

  </div>

  

  <div class=example>
   <p>The following markup:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>h3</c-><c- p>&gt;</c->Suggested groups<c- p>&lt;/</c-><c- f>h3</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>menu</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?cmd=hsg&quot;</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;hideSuggestedGroups()&quot;</c-><c- p>&gt;</c->Hide suggested groups<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>menu</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/comp.infosystems.www.authoring.stylesheets/view&quot;</c-><c- p>&gt;</c->comp.infosystems.www.authoring.stylesheets<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> -
     <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/comp.infosystems.www.authoring.stylesheets/subscribe&quot;</c-><c- p>&gt;</c->join<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Group description: <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Layout/presentation on the WWW.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;0.5&quot;</c-><c- p>&gt;</c->Moderate activity,<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></strong> Usenet, 618 subscribers<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/netscape.public.mozilla.xpinstall/view&quot;</c-><c- p>&gt;</c->netscape.public.mozilla.xpinstall<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> -
     <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/netscape.public.mozilla.xpinstall/subscribe&quot;</c-><c- p>&gt;</c->join<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Group description: <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Mozilla XPInstall discussion.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;0.25&quot;</c-><c- p>&gt;</c->Low activity,<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></strong> Usenet, 22 subscribers<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/mozilla.dev.general/view&quot;</c-><c- p>&gt;</c->mozilla.dev.general<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> -
     <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/mozilla.dev.general/subscribe&quot;</c-><c- p>&gt;</c->join<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;0.25&quot;</c-><c- p>&gt;</c->Low activity,<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></strong> Usenet, 66 subscribers<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>
   <p>Might be rendered as follows:</p>
   <p><img alt="With the <meter> elements rendered as inline green bars of varying lengths." src=/images/sample-meter.png width=332 height=178></p>
  </div>

  <p>User agents  combine the value of the <code id=the-meter-element:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute and the other attributes to provide context-sensitive
  help or inline text detailing the actual values.</p>

  <div class=example>
   <p>For example, the following snippet:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>60</c-> <c- e>value</c-><c- o>=</c-><c- s>23.2</c-> <c- e>title</c-><c- o>=</c-><c- s>seconds</c-><c- p>&gt;&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></code></pre>
   <p>...might cause the user agent to display a gauge with a tooltip
   saying "Value: 23.2 out of 60." on one line and "seconds" on a
   second line.</p>
  </div>

  

  <div class=example>

   <p>The following example shows how a gauge could fall back to localized or pretty-printed
   text.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Disk usage: <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>value</c-><c- o>=</c-><c- s>170261928</c-> <c- e>max</c-><c- o>=</c-><c- s>233257824</c-><c- p>&gt;</c->170 261 928 bytes used
out of 233 257 824 bytes available<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>




  <h4 id=the-fieldset-element><span class=secno>4.10.15</span> The <dfn data-dfn-type=element><code>fieldset</code></dfn> element<a href=#the-fieldset-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset title="The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.">Element/fieldset</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>15+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>14+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-fieldset-element:concept-element-categories>Categories</a>:<dd><a id=the-fieldset-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a href=forms.html#category-listed id=the-fieldset-element:category-listed>Listed</a> and <a href=forms.html#category-autocapitalize id=the-fieldset-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-fieldset-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-fieldset-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-fieldset-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-fieldset-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-fieldset-element:concept-element-content-model>Content model</a>:<dd>Optionally, a <code id=the-fieldset-element:the-legend-element><a href=#the-legend-element>legend</a></code> element, followed by <a id=the-fieldset-element:flow-content-2-3 href=dom.html#flow-content-2>flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-fieldset-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-fieldset-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-fieldset-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-fieldset-element:attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code> —  Whether the descendant form controls, except any inside <code id=the-fieldset-element:the-legend-element-2><a href=#the-legend-element>legend</a></code>, are disabled
     <dd><code id=the-fieldset-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-fieldset-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-fieldset-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code>   — Name of the element to use in the <code id=the-fieldset-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API.<dt><a href=dom.html#concept-element-accessibility-considerations id=the-fieldset-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-fieldset>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-fieldset>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-fieldset-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLFieldSetElement</code>.</dl>

  <p>The <code id=the-fieldset-element:the-fieldset-element><a href=#the-fieldset-element>fieldset</a></code> element <a id=the-fieldset-element:represents href=dom.html#represents>represents</a> a set of form controls (or other
  content) grouped together, optionally with a caption. The caption is given by the first
  <code id=the-fieldset-element:the-legend-element-3><a href=#the-legend-element>legend</a></code> element that is a child of the <code id=the-fieldset-element:the-fieldset-element-2><a href=#the-fieldset-element>fieldset</a></code> element, if any. The
  remainder of the descendants form the group.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attr-disabled title="The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.">Element/fieldset#attr-disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><p>The <dfn data-dfn-for=fieldset id=attr-fieldset-disabled data-dfn-type=element-attr><code>disabled</code></dfn> attribute, when specified, causes all the
  form control descendants of the <code id=the-fieldset-element:the-fieldset-element-3><a href=#the-fieldset-element>fieldset</a></code> element, excluding those that are
  descendants of the <code id=the-fieldset-element:the-fieldset-element-4><a href=#the-fieldset-element>fieldset</a></code> element's first <code id=the-fieldset-element:the-legend-element-4><a href=#the-legend-element>legend</a></code> element child, if
  any, to be <a href=form-control-infrastructure.html#concept-fe-disabled id=the-fieldset-element:concept-fe-disabled>disabled</a>.</p>

  <p>A <code id=the-fieldset-element:the-fieldset-element-5><a href=#the-fieldset-element>fieldset</a></code> element is a <dfn id=concept-fieldset-disabled>disabled
  fieldset</dfn> if it matches any of the following conditions:</p>

  <ul><li>Its <code id=the-fieldset-element:attr-fieldset-disabled-2><a href=#attr-fieldset-disabled>disabled</a></code> attribute is specified

   <li>It is a descendant of another <code id=the-fieldset-element:the-fieldset-element-6><a href=#the-fieldset-element>fieldset</a></code> element whose <code id=the-fieldset-element:attr-fieldset-disabled-3><a href=#attr-fieldset-disabled>disabled</a></code> attribute is specified, and is <em>not</em> a
   descendant of that <code id=the-fieldset-element:the-fieldset-element-7><a href=#the-fieldset-element>fieldset</a></code> element's first <code id=the-fieldset-element:the-legend-element-5><a href=#the-legend-element>legend</a></code> element child, if
   any.</ul>

  <p>The <code id=the-fieldset-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-fieldset-element:the-fieldset-element-8><a href=#the-fieldset-element>fieldset</a></code> element with its <a id=the-fieldset-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>. The <code id=the-fieldset-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name.</p>

  <dl class=domintro><dt><code><var>fieldset</var>.<span id=dom-fieldset-type>type</span></code><dd><p>Returns the string "fieldset".<dt><code><var>fieldset</var>.<span id=dom-fieldset-elements>elements</span></code><dd><p>Returns an <code id=the-fieldset-element:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the form controls in the element.</dl>

  

  <div class=example>

   <p>This example shows a <code id=the-fieldset-element:the-fieldset-element-9><a href=#the-fieldset-element>fieldset</a></code> element being used to group a set of related
   controls:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Display<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>c</c-> <c- e>value</c-><c- o>=</c-><c- s>0</c-> <c- e>checked</c-><c- p>&gt;</c-> Black on White<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>c</c-> <c- e>value</c-><c- o>=</c-><c- s>1</c-><c- p>&gt;</c-> White on Black<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>g</c-><c- p>&gt;</c-> Use grayscale<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Enhance contrast <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>range</c-> <c- e>name</c-><c- o>=</c-><c- s>e</c-> <c- e>list</c-><c- o>=</c-><c- s>contrast</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>100</c-> <c- e>value</c-><c- o>=</c-><c- s>0</c-> <c- e>step</c-><c- o>=</c-><c- s>1</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>contrast</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>Normal</c-> <c- e>value</c-><c- o>=</c-><c- s>0</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>Maximum</c-> <c- e>value</c-><c- o>=</c-><c- s>100</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following snippet shows a fieldset with a checkbox in the legend that controls whether or
   not the fieldset is enabled. The contents of the fieldset consist of two required text controls
   and an optional year/month control.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;clubfields&quot;</c-> <c- e>disabled</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>club</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;form.clubfields.disabled = !checked&quot;</c-><c- p>&gt;</c->
  Use Club Card
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name on card: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clubname</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Card number: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clubnum</c-> <c- e>required</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[-0-9]+&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Expiry date: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clubexp</c-> <c- e>type</c-><c- o>=</c-><c- s>month</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>You can also nest <code id=the-fieldset-element:the-fieldset-element-10><a href=#the-fieldset-element>fieldset</a></code> elements. Here is an example expanding on the previous
   one that does so:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;clubfields&quot;</c-> <c- e>disabled</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>club</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;form.clubfields.disabled = !checked&quot;</c-><c- p>&gt;</c->
  Use Club Card
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name on card: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clubname</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;numfields&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>checked</c-> <c- e>name</c-><c- o>=</c-><c- s>clubtype</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;form.numfields.disabled = !checked&quot;</c-><c- p>&gt;</c->
   My card has numbers on it
  <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Card number: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clubnum</c-> <c- e>required</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[-0-9]+&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;letfields&quot;</c-> <c- e>disabled</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>clubtype</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;form.letfields.disabled = !checked&quot;</c-><c- p>&gt;</c->
   My card has letters on it
  <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Card code: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clublet</c-> <c- e>required</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[A-Za-z]+&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

   <p>In this example, if the outer "Use Club Card" checkbox is not checked, everything inside the
   outer <code id=the-fieldset-element:the-fieldset-element-11><a href=#the-fieldset-element>fieldset</a></code>, including the two radio buttons in the legends of the two nested
   <code id=the-fieldset-element:the-fieldset-element-12><a href=#the-fieldset-element>fieldset</a></code>s, will be disabled. However, if the checkbox is checked, then the radio
   buttons will both be enabled and will let you select which of the two inner
   <code id=the-fieldset-element:the-fieldset-element-13><a href=#the-fieldset-element>fieldset</a></code>s is to be enabled.</p>

  </div>

  <div class=example>

   <p>This example shows a grouping of controls where the <code id=the-fieldset-element:the-legend-element-6><a href=#the-legend-element>legend</a></code> element both labels
   the grouping, and the nested heading element surfaces the grouping in the document outline:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->
  How can we best reach you?
 <c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>checked</c-> <c- e>name</c-><c- o>=</c-><c- s>contact_pref</c-><c- p>&gt;</c->
  Phone
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>contact_pref</c-><c- p>&gt;</c->
  Text
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>contact_pref</c-><c- p>&gt;</c->
  Email
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-legend-element><span class=secno>4.10.16</span> The <dfn data-dfn-type=element><code>legend</code></dfn> element<a href=#the-legend-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend title="The <legend> HTML element represents a caption for the content of its parent <fieldset>.">Element/legend</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-legend-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-legend-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As the <a id=the-legend-element:first-child href=https://dom.spec.whatwg.org/#concept-tree-first-child data-x-internal=first-child>first child</a> of a <code id=the-legend-element:the-fieldset-element><a href=#the-fieldset-element>fieldset</a></code> element.<dd>As the <a id=the-legend-element:first-child-2 href=https://dom.spec.whatwg.org/#concept-tree-first-child data-x-internal=first-child>first child</a> of an <code id=the-legend-element:the-optgroup-element><a href=#the-optgroup-element>optgroup</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-legend-element:concept-element-content-model>Content model</a>:<dd>If the element is a child of an <code id=the-legend-element:the-optgroup-element-2><a href=#the-optgroup-element>optgroup</a></code> element: <a id=the-legend-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>,
   but there must be no <a id=the-legend-element:interactive-content-2 href=dom.html#interactive-content-2>interactive content</a> and no descendant with the <code id=the-legend-element:attr-tabindex><a href=interaction.html#attr-tabindex>tabindex</a></code> attribute.<dd>Otherwise: <a id=the-legend-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>Phrasing content</a>, optionally intermixed with <a id=the-legend-element:heading-content-2 href=dom.html#heading-content-2>heading
   content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-legend-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-legend-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-legend-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-legend-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-legend>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-legend>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-legend-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLLegendElement</code>.</dl>

  <p>The <code id=the-legend-element:the-legend-element><a href=#the-legend-element>legend</a></code> element <a id=the-legend-element:represents href=dom.html#represents>represents</a> a caption for the rest of the contents
  of the <code id=the-legend-element:the-legend-element-2><a href=#the-legend-element>legend</a></code> element's parent <code id=the-legend-element:the-fieldset-element-2><a href=#the-fieldset-element>fieldset</a></code> element. Otherwise, if the <code id=the-legend-element:the-legend-element-3><a href=#the-legend-element>legend</a></code> has a parent <code id=the-legend-element:the-optgroup-element-3><a href=#the-optgroup-element>optgroup</a></code> element, then
  the <code id=the-legend-element:the-legend-element-4><a href=#the-legend-element>legend</a></code> represents the <code id=the-legend-element:the-optgroup-element-4><a href=#the-optgroup-element>optgroup</a></code>'s label.</p>

  <dl class=domintro><dt><code><var>legend</var>.<span id=dom-legend-form>form</span></code><dd><p>Returns the element's <code id=the-legend-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element, if any, or null otherwise.</dl>

  

  <h4 id=the-selectedcontent-element><span class=secno>4.10.17</span> The <dfn data-dfn-type=element><code>selectedcontent</code></dfn> element<a href=#the-selectedcontent-element class=self-link></a></h4>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-selectedcontent-element:concept-element-categories>Categories</a>:<dd><a id=the-selectedcontent-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-selectedcontent-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a descendant of a <code id=the-selectedcontent-element:the-button-element><a href=#the-button-element>button</a></code> element which is a child of a <code id=the-selectedcontent-element:the-select-element><a href=#the-select-element>select</a></code>
   element.<dt><a href=dom.html#concept-element-content-model id=the-selectedcontent-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-selectedcontent-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-selectedcontent-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-selectedcontent-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-selectedcontent-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-selectedcontent-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-selectedcontent>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-selectedcontent>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-selectedcontent-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLSelectedContentElement</code>.</dl>

  <p>The <code id=the-selectedcontent-element:the-selectedcontent-element><a href=#the-selectedcontent-element>selectedcontent</a></code> element reflects the contents of a <code id=the-selectedcontent-element:the-select-element-2><a href=#the-select-element>select</a></code>
  element's currently selected <code id=the-selectedcontent-element:the-option-element><a href=#the-option-element>option</a></code> element. <code id=the-selectedcontent-element:the-selectedcontent-element-2><a href=#the-selectedcontent-element>selectedcontent</a></code> elements
  can be used to declaratively show the selected <code id=the-selectedcontent-element:the-option-element-2><a href=#the-option-element>option</a></code> element's contents within the
  <code id=the-selectedcontent-element:the-select-element-3><a href=#the-select-element>select</a></code> element's first child <code id=the-selectedcontent-element:the-button-element-2><a href=#the-button-element>button</a></code> element.</p>

  <p class=note>The <code id=the-selectedcontent-element:the-option-element-3><a href=#the-option-element>option</a></code> element's <code id=the-selectedcontent-element:attr-option-label><a href=#attr-option-label>label</a></code>
  attribute can be used to render a visible label for the option, but the
  <code id=the-selectedcontent-element:the-selectedcontent-element-3><a href=#the-selectedcontent-element>selectedcontent</a></code> element will not reflect the content of the <code id=the-selectedcontent-element:attr-option-label-2><a href=#attr-option-label>label</a></code> attribute.</p>

  <p>Every time the selected <code id=the-selectedcontent-element:the-option-element-4><a href=#the-option-element>option</a></code> of a <code id=the-selectedcontent-element:the-select-element-4><a href=#the-select-element>select</a></code> switches from one
  option to another, the <code id=the-selectedcontent-element:the-selectedcontent-element-4><a href=#the-selectedcontent-element>selectedcontent</a></code> element removes all of its children and
  replaces them with a new copy of the DOM structure of the <code id=the-selectedcontent-element:the-select-element-5><a href=#the-select-element>select</a></code>'s selected
  <code id=the-selectedcontent-element:the-option-element-5><a href=#the-option-element>option</a></code> element.</p>

  <p>Every <code id=the-selectedcontent-element:the-selectedcontent-element-5><a href=#the-selectedcontent-element>selectedcontent</a></code> element has a <dfn id=selectedcontent-disabled>disabled</dfn> state, which is a boolean, initially set to
  false.</p>

  <p>To <dfn id="update-a-select's-selectedcontent">update a <code>select</code>'s <code>selectedcontent</code></dfn> given a
  <code id=the-selectedcontent-element:the-select-element-6><a href=#the-select-element>select</a></code> element <var>select</var>:</p>

  <ol><li><p>Let <var>selectedcontent</var> be the result of <a href=#select-enabled-selectedcontent id=the-selectedcontent-element:select-enabled-selectedcontent>get a <code>select</code>'s enabled
   <code>selectedcontent</code></a> given <var>select</var>.<li><p>If <var>selectedcontent</var> is null, then return.<li><p>Let <var>option</var> be the first <code id=the-selectedcontent-element:the-option-element-6><a href=#the-option-element>option</a></code> in <var>select</var>'s <span>list of options</span> whose <span>selectedness</span> is true, if any such <code id=the-selectedcontent-element:the-option-element-7><a href=#the-option-element>option</a></code>
   exists, otherwise null.<li><p>If <var>option</var> is null, then run <a href=#clear-a-selectedcontent id=the-selectedcontent-element:clear-a-selectedcontent>clear a <code>selectedcontent</code></a>
   given <var>selectedcontent</var>.<li><p>Otherwise, run <a href=#clone-an-option-into-a-selectedcontent id=the-selectedcontent-element:clone-an-option-into-a-selectedcontent>clone an option into a <code>selectedcontent</code></a> given
   <var>option</var> and <var>selectedcontent</var>.</ol>

  <p>To <dfn id=select-enabled-selectedcontent>get a <code>select</code>'s enabled
  <code>selectedcontent</code></dfn> given a <code id=the-selectedcontent-element:the-select-element-7><a href=#the-select-element>select</a></code> element <var>select</var>:</p>

  <ol><li><p>If <var>select</var> has the <code id=the-selectedcontent-element:attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
   attribute, then return null.<li><p>Let <var>selectedcontent</var> be the first <code id=the-selectedcontent-element:the-selectedcontent-element-6><a href=#the-selectedcontent-element>selectedcontent</a></code> element
   <a id=the-selectedcontent-element:descendant href=https://dom.spec.whatwg.org/#concept-tree-descendant data-x-internal=descendant>descendant</a> of <var>select</var> in <a id=the-selectedcontent-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> if any such element
   exists; otherwise return null.<li><p>If <var>selectedcontent</var> is <a href=#selectedcontent-disabled id=the-selectedcontent-element:selectedcontent-disabled>disabled</a>,
   then return null.<li><p>Return <var>selectedcontent</var>.</ol>

  <p>To <dfn id=clone-an-option-into-a-selectedcontent>clone an <code>option</code> into a <code>selectedcontent</code></dfn>, given an
  <code id=the-selectedcontent-element:the-option-element-8><a href=#the-option-element>option</a></code> element <var>option</var> and a <code id=the-selectedcontent-element:the-selectedcontent-element-7><a href=#the-selectedcontent-element>selectedcontent</a></code> element
  <var>selectedcontent</var>:</p>

  <ol><li><p>Let <var>documentFragment</var> be a new <code id=the-selectedcontent-element:documentfragment><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> whose <a id=the-selectedcontent-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a> is <var>option</var>'s <a id=the-selectedcontent-element:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li>
    <p>For each <var>child</var> of <var>option</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-child id=the-selectedcontent-element:concept-tree-child data-x-internal=concept-tree-child>children</a>:</p>

    <ol><li><p>Let <var>childClone</var> be the result of running <a href=https://dom.spec.whatwg.org/#concept-node-clone id=the-selectedcontent-element:concept-node-clone data-x-internal=concept-node-clone>clone</a> given <var>child</var> with <a href=https://dom.spec.whatwg.org/#clone-a-node-subtree id=the-selectedcontent-element:concept-node-clone-subtree data-x-internal=concept-node-clone-subtree>subtree</a> set to true.<li><p><a href=https://dom.spec.whatwg.org/#concept-node-append id=the-selectedcontent-element:concept-node-append data-x-internal=concept-node-append>Append</a> <var>childClone</var> to
     <var>documentFragment</var>.</ol>
   <li><p><a href=https://dom.spec.whatwg.org/#concept-node-replace-all id=the-selectedcontent-element:concept-node-replace-all data-x-internal=concept-node-replace-all>Replace all</a> with
   <var>documentFragment</var> within <var>selectedcontent</var>.</ol>

  <p>To <dfn id=clear-a-selectedcontent>clear a <code>selectedcontent</code></dfn> given a <code id=the-selectedcontent-element:the-selectedcontent-element-8><a href=#the-selectedcontent-element>selectedcontent</a></code> element
  <var>selectedcontent</var>:</p>

  <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-node-replace-all id=the-selectedcontent-element:concept-node-replace-all-2 data-x-internal=concept-node-replace-all>Replace all</a> with null within
   <var>selectedcontent</var>.</ol>

  <p>To <dfn id="clear-a-select's-non-primary-selectedcontent-elements">clear a <code>select</code>'s non-primary <code>selectedcontent</code> elements</dfn>,
  given a <code id=the-selectedcontent-element:the-select-element-8><a href=#the-select-element>select</a></code> element <var>select</var>:</p>

  <ol><li><p>Let <var>passedFirstSelectedcontent</var> be false.<li>
    <p>For each <var>descendant</var> of <var>select</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-descendant id=the-selectedcontent-element:descendant-2 data-x-internal=descendant>descendants</a> in <a id=the-selectedcontent-element:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> that is a
    <code id=the-selectedcontent-element:the-selectedcontent-element-9><a href=#the-selectedcontent-element>selectedcontent</a></code> element:</p>

    <ol><li><p>If <var>passedFirstSelectedcontent</var> is false, then set
     <var>passedFirstSelectedcontent</var> to true.<li><p>Otherwise, run <a href=#clear-a-selectedcontent id=the-selectedcontent-element:clear-a-selectedcontent-2>clear a <code>selectedcontent</code></a> given
     <var>descendant</var>.</ol>
   </ol>

  <p>The <code id=the-selectedcontent-element:the-selectedcontent-element-10><a href=#the-selectedcontent-element>selectedcontent</a></code> <a id=the-selectedcontent-element:html-element-post-connection-steps href=infrastructure.html#html-element-post-connection-steps>HTML element post-connection steps</a>, given
  <var>selectedcontent</var>, are:</p>

  <ol><li><p>Let <var>nearestSelectAncestor</var> be null.<li><p>Let <var>ancestor</var> be <var>selectedcontent</var>'s <a id=the-selectedcontent-element:parent href=https://dom.spec.whatwg.org/#concept-tree-parent data-x-internal=parent>parent</a>.<li><p>Set <var>selectedcontent</var>'s <a href=#selectedcontent-disabled id=the-selectedcontent-element:selectedcontent-disabled-2>disabled</a>
   state to false.<li>
    <p>For each <var>ancestor</var> of <var>selectedcontent</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-ancestor id=the-selectedcontent-element:ancestor data-x-internal=ancestor>ancestors</a>, in reverse <a id=the-selectedcontent-element:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li>
      <p>If <var>ancestor</var> is a <code id=the-selectedcontent-element:the-select-element-9><a href=#the-select-element>select</a></code> element:</p>

      <ol><li><p>If <var>nearestSelectAncestor</var> is null, then set <var>nearestSelectAncestor</var>
       to <var>select</var>.<li><p>Otherwise, set <var>selectedcontent</var>'s <a href=#selectedcontent-disabled id=the-selectedcontent-element:selectedcontent-disabled-3>disabled</a> state to true.</ol>
     <li><p>If <var>ancestor</var> is an <code id=the-selectedcontent-element:the-option-element-9><a href=#the-option-element>option</a></code> element or a
     <code id=the-selectedcontent-element:the-selectedcontent-element-11><a href=#the-selectedcontent-element>selectedcontent</a></code> element, then set <var>selectedcontent</var>'s <a href=#selectedcontent-disabled id=the-selectedcontent-element:selectedcontent-disabled-4>disabled</a> state to true.</ol>
   <li><p>If <var>nearestSelectAncestor</var> is null or <var>nearestSelectAncestor</var> has the
   <code id=the-selectedcontent-element:attr-select-multiple-2><a href=#attr-select-multiple>multiple</a></code> attribute, then return.<li><p>Run <a href="#update-a-select's-selectedcontent" id="the-selectedcontent-element:update-a-select's-selectedcontent">update a <code>select</code>'s <code>selectedcontent</code></a> given
   <var>nearestSelectAncestor</var>.<li><p>Run <a href="#clear-a-select's-non-primary-selectedcontent-elements" id="the-selectedcontent-element:clear-a-select's-non-primary-selectedcontent-elements">clear a <code>select</code>'s non-primary <code>selectedcontent</code>
   elements</a> given <var>nearestSelectAncestor</var>.</ol>

  <p>The <code id=the-selectedcontent-element:the-selectedcontent-element-12><a href=#the-selectedcontent-element>selectedcontent</a></code> <a id=the-selectedcontent-element:html-element-removing-steps href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a>, given
  <var>selectedcontent</var> and <var>oldParent</var>, are:</p>

  <ol><li>
    <p>For each <var>ancestor</var> of <var>selectedcontent</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-ancestor id=the-selectedcontent-element:ancestor-2 data-x-internal=ancestor>ancestors</a>, in reverse <a id=the-selectedcontent-element:tree-order-4 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>ancestor</var> is a <code id=the-selectedcontent-element:the-select-element-10><a href=#the-select-element>select</a></code> element, then return.</ol>
   <li>
    <p>For each <var>ancestor</var> of <var>oldParent</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor id=the-selectedcontent-element:inclusive-ancestor data-x-internal=inclusive-ancestor>inclusive ancestors</a>, in reverse <a id=the-selectedcontent-element:tree-order-5 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>ancestor</var> is a <code id=the-selectedcontent-element:the-select-element-11><a href=#the-select-element>select</a></code> element, then run <a href="#update-a-select's-selectedcontent" id="the-selectedcontent-element:update-a-select's-selectedcontent-2">update a
     <code>select</code>'s <code>selectedcontent</code></a> given <var>ancestor</var> and
     return.</ol>
   </ol>



  <nav><a href=input.html>← 4.10.5 The input element</a> — <a href=index.html>Table of Contents</a> — <a href=form-control-infrastructure.html>4.10.18 Form control infrastructure →</a></nav>
